Chart Components
Data visualization molecules combining atomic elements for interactive charts and dashboard analytics
6
Chart Types
4
Size Options
100%
Interactive
WCAG
AA Accessible
Multi
Data Sources
Interactive Chart Builder
Customize Chart
Preview
Chart Types
Bar Chart
Compare values across categories with vertical bars
Canvas: barChart (200x200)
Line Chart
Show trends and changes over time
Canvas: lineChart (200x200)
Pie Chart
Display proportional data as segments
Canvas: pieChart (200x200)
Doughnut Chart
Pie chart with center space for additional info
Canvas: doughnutChart (200x200)
Radar Chart
Multi-dimensional data visualization
Canvas: radarChart (200x200)
Polar Area Chart
Circular chart showing magnitude and categories
Canvas: polarAreaChart (200x200)
Dashboard Example
Child Health Impact Dashboard
Comprehensive overview of program outcomes and regional data
Regional Impact
Canvas: dashboardChart1 (300x300)
Program Growth
Canvas: dashboardChart2 (300x300)
Usage Guidelines
Best Practices
- • Choose appropriate chart type for your data
- • Use consistent color schemes across charts
- • Include clear labels and legends
- • Ensure charts are accessible with alt text
- • Test charts on different screen sizes
- • Provide data table alternatives
Common Mistakes
- • Using 3D effects that distort data
- • Overcrowding charts with too much data
- • Poor color choices that reduce readability
- • Missing or unclear axis labels
- • Charts that don't scale properly
- • No fallback for screen readers