A comprehensive hands-on workshop introducing AG Charts through progressive challenges. Learn to build everything from basic line charts to advanced financial visualizations with interactive features.
This workshop takes you on a journey through AG Charts capabilities, from fundamental concepts to enterprise-level features. Each challenge builds on previous knowledge while introducing new chart types, interactions, and advanced functionality.
- Core Charting: Line, bar, pie, and donut charts
- Advanced Features: Themes, dual axes, mixed series types
- Enterprise Capabilities: High-performance rendering, zoom, pan, navigation
- Specialized Charts: Geographic maps, financial charts with annotations
- Interactivity: Click handlers, state management, custom tooltips
- Styling: Custom themes, formatters, and visual customization
- Basic knowledge of React and TypeScript
- Node.js 18+ installed
- Familiarity with npm or yarn
# Clone the repository
git clone https://github.com/ag-grid/react-summit-us-workshop-2025.git
cd react-summit-us-workshop-2025
# Install dependencies
npm install
# Start development server
npm run devOpen your browser to http://localhost:5173 to see the application.
Click the StackBlitz button to open the workshop in your browser without local setup:
react-summit-us-workshop-2025/
├── src/
│ ├── challenges/
│ │ ├── challenge-1/ # Multi-Line Chart with Cross Lines
│ │ ├── challenge-2/ # Interactive Polar Charts
│ │ ├── challenge-3/ # Custom Themes & Mixed Series
│ │ ├── challenge-4/ # Enterprise High-Performance Charts
│ │ ├── challenge-5/ # Map Charts
│ │ └── challenge-6/ # Financial Charts with Annotations
│ ├── App.tsx # Main application with challenge navigation
│ └── ...
├── package.json
└── README.md
The repository uses a branch-based approach for solutions:
-
mainbranch: Contains starter templates for all challenges- Each challenge folder has instructions (README.md)
- Pre-configured data files
- Empty chart templates ready to be filled in
-
Solution branches: One per challenge (
challenge-1-solution,challenge-2-solution, etc.)- Complete working implementations
- Reference code for each challenge
- Can be checked out if you get stuck
Each challenge folder contains:
-
README.md: Detailed instructions including:
- Learning objectives
- Key concepts explained
- Step-by-step implementation guide
- Code snippets and examples
- Documentation links
- Success criteria
-
Data files: Pre-configured datasets (
data.ts,topology.ts, etc.) -
Component file: Starter template with:
- Necessary imports
- Empty chart options
- Component structure
-
Utility files: Helper functions for formatting, styling, etc.
Start Challenge → Read README → Implement Solution → Check Against Success Criteria
↓
(If stuck)
↓
View solution branch for reference
Topics: Basic charts, series configuration, axes, annotations
Build a time-series chart showing CO2 emissions per capita for multiple countries with cross lines marking historical events (WWI, WWII, GFC).
Key Concepts:
- Chart options structure
- Line series configuration
- Axis formatters
- Cross lines and ranges
Topics: Pie/donut charts, React state, event handlers, tooltips
Create an interactive GDP visualization that toggles between pie and donut views, with click-to-select functionality and custom tooltips.
Key Concepts:
- Pie vs donut charts
- React state integration
- Custom tooltips
- Item styling
- Event listeners
Topics: Theming, combination charts, dual axes
Build a themed chart combining line and bar series on different Y-axes, showing the relationship between CO2 emissions and GDP per capita.
Key Concepts:
- Theme structure and palette
- Series-specific overrides
- Mixed chart types
- Dual Y-axes configuration
- Axis binding
Topics: AG Charts Enterprise, large datasets, zoom, navigator
Implement a high-performance chart rendering 1 million data points with interactive zoom, pan, and a navigator mini-chart.
Key Concepts:
- Enterprise features
- Zoom and pan
- Navigator/minimap
- Ordinal-time axes
- Crosshair
- Performance optimization
Topics: Map series, topology, choropleth, gradient legend
Create an interactive world map with countries colored by GDP per capita using map-shape series and GeoJSON topology.
Key Concepts:
- Map-shape series
- GeoJSON topology integration
- Color mapping
- Gradient legends
- Geographic interactions
Topics: Financial charts component, annotations, market data
Build a professional S&P 500 chart with the specialized AgFinancialCharts component, pre-configured with annotations marking major market events.
Key Concepts:
- AgFinancialCharts component
- Annotation types (callout, comment, lines, text)
- Initial state configuration
- Date handling
- Financial styling
To view the complete solution for any challenge:
# View solution for Challenge 1
git checkout challenge-1-solution
# Return to starter templates
git checkout mainOr browse solution branches on GitHub to compare your implementation.
- AG Charts: Professional charting library
- AG Charts Enterprise: Advanced features (maps, financial charts, high performance)
- React 19: UI framework
- TypeScript: Type safety
- Vite: Build tool and dev server
- Read the README first: Each challenge README contains all the information you need
- Start simple: Get basic functionality working before adding advanced features
- Use the browser console: Check for TypeScript errors and warnings
- Test incrementally: Verify each feature as you add it
- Refer to documentation: Links are provided in each challenge
- Check solutions if stuck: Solution branches are there to help you learn
- Experiment: Try modifying values to see how they affect the chart
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Run linter
npm run lint- Ensure Node.js 18+ is installed:
node --version - Delete
node_modulesand reinstall:rm -rf node_modules && npm install - Check if port 5173 is already in use
- Make sure all imports are correct
- Check that you're using the right types from the correct packages
- Verify that
ag-charts-enterpriseis imported when using enterprise features
- Check browser console for errors
- Ensure data is loaded correctly
- Verify chart options structure matches the documentation
- Make sure the component has a defined size (width/height)
- Verify
import 'ag-charts-enterprise';is at the top of your file - Check that
ag-charts-enterprisepackage is installed
Approximate timing for each challenge (adjust based on your pace):
- Challenge 1: 20-25 minutes
- Challenge 2: 25-30 minutes
- Challenge 3: 25-30 minutes
- Challenge 4: 20-25 minutes
- Challenge 5: 20-25 minutes
- Challenge 6: 15-20 minutes
Total workshop time: ~2.5-3 hours including breaks and discussion.
After completing the workshop:
- Explore the AG Charts Gallery for more chart types
- Consider AG Charts Enterprise for production applications
Built for React Summit US 2025 attendees to learn professional data visualization with AG Charts.
Happy charting! 📊