Chart
NewA unified charting component with line, bar, area, and donut variants. Fully RTL-aware with automatic axis flipping, Arabic numeral formatting, and theme-aware colors.
Preview
| quarter | dubai | riyadh |
|---|---|---|
| Q1 | 128 | 95 |
| Q2 | 145 | 112 |
| Q3 | 162 | 130 |
| Q4 | 189 | 148 |
Installation
Usage
Examples
Line Chart
Smooth line chart for tracking regional sales trends over quarters. Supports multi-series with distinct colors and dash patterns.
| quarter | dubai | riyadh |
|---|---|---|
| Q1 | 128 | 95 |
| Q2 | 145 | 112 |
| Q3 | 162 | 130 |
| Q4 | 189 | 148 |
Bar Chart
Vertical bar chart for comparing department budgets at a glance.
| dept | budget |
|---|---|
| Eng | 420 |
| Design | 280 |
| Marketing | 350 |
| Sales | 310 |
| Support | 190 |
Area Chart
Filled area chart showing monthly active users growth over time.
| month | users |
|---|---|
| Jan | 1,200 |
| Feb | 1,450 |
| Mar | 1,380 |
| Apr | 1,720 |
| May | 1,890 |
| Jun | 2,150 |
Donut Chart
Radial progress indicator with customizable inner label. Perfect for KPIs and completion metrics.
Multi-Series
Pass an array to valueKey to display multiple data series on the same chart.
| quarter | dubai | riyadh | doha |
|---|---|---|---|
| Q1 | 128 | 95 | 64 |
| Q2 | 145 | 112 | 78 |
| Q3 | 162 | 130 | 85 |
| Q4 | 189 | 148 | 102 |
Size Variants
Three built-in size presets control the chart height.
Small (sm) — fontSize={11}
| month | users |
|---|---|
| Jan | 1,200 |
| Feb | 1,450 |
| Mar | 1,380 |
| Apr | 1,720 |
| May | 1,890 |
| Jun | 2,150 |
Large (lg) — fontSize={16}
| month | users |
|---|---|
| Jan | 1,200 |
| Feb | 1,450 |
| Mar | 1,380 |
| Apr | 1,720 |
| May | 1,890 |
| Jun | 2,150 |
Props
Chart Props (all types)
| Name | Type | Default | Description |
|---|---|---|---|
typeRequired | 'line' | 'bar' | 'area' | 'donut' | — | Chart variant to render |
dataRequired | ChartDataItem[] | — | Array of data items — each needs at least a category key and value key |
categoryKey | string | 'name' | Key in each data item used for X axis / category labels |
valueKey | string | string[] | 'value' | Key(s) for values. String for single series, array for multi-series |
colors | string[] | semantic theme colors | Custom CSS colors for each series (supports CSS variable references) |
size | 'sm' | 'md' | 'lg' | 'md' | Chart height preset: sm (180px), md (260px), lg (360px) |
locale | 'en' | 'ar' | auto (from direction provider) | Locale for number formatting on axes. Auto-detected from direction provider |
showGrid | boolean | true | Show background grid lines |
showXAxis | boolean | true | Show the X axis |
showYAxis | boolean | true | Show the Y axis |
yAxisFormatter | (value: number) => string | — | Custom formatter for Y axis tick values |
xAxisFormatter | (value: string) => string | — | Custom formatter for X axis tick values |
strokeWidth | number | 2.5 | Line stroke width for line and area charts |
fontSize | number | 14 | Font size for axis tick labels in pixels |
className | string | — | Additional CSS classes to apply |
Donut-specific Props
| Name | Type | Default | Description |
|---|---|---|---|
value | number | — | Percentage value to display (0–100) |
innerLabel | string | — | Large text displayed in the center of the donut |
innerSubLabel | string | — | Smaller text displayed below the inner label |
thickness | 'thin' | 'default' | 'thick' | 'default' | Arc thickness: thin, default, or thick |
Donut charts use the value prop (0–100) for the arc fill. The data prop is still required but can be an empty array when using value directly.
Accessibility
Visually Hidden Data Table
Every chart renders a <table className="sr-only"> containing all data values in row/column form. Screen readers skip the inaccessible canvas entirely and read this table instead, giving assistive technology users access to the same data sighted users see in the chart.
Semantic figure Wrapper and Hidden Canvas
Charts use a <figure> element with aria-label rather than <div role="img">, avoiding the duplicate-role conflict that arises when a canvas already carries an implicit role. The canvas itself is wrapped in <div aria-hidden="true"> so screen readers never attempt to interpret it.
Donut Inner Label
The visible overlay text in the center of a donut chart carries aria-hidden="true". A separate sr-only element announces the same value (and the innerLabel / innerSubLabel text) to screen readers, avoiding double-reading.
Multi-Series Dash Patterns
When a line chart has more than one series, each line receives a distinct dash pattern (solid, dashed, dotted) in addition to a distinct color. This ensures series are distinguishable without relying on color alone, meeting WCAG 1.4.1 Use of Color.
RTL Support
The Chart component automatically detects RTL context and adjusts its layout. No additional configuration is needed — just wrap your app in the direction provider.
LTR (English)
| dept | budget |
|---|---|
| Eng | 420 |
| Design | 280 |
| Marketing | 350 |
| Sales | 310 |
| Support | 190 |
RTL (العربية)
| dept | budget |
|---|---|
| الهندسة | ٤٢٠ |
| التصميم | ٢٨٠ |
| التسويق | ٣٥٠ |
| المبيعات | ٣١٠ |
| الدعم | ١٩٠ |
RTL Features
- •X-axis labels are reversed so data reads right-to-left
- •Y-axis moves to the right side of the chart
- •Axis values use Arabic-Indic numerals (٤٬٢٠٠ instead of 4,200)
- •Tooltip values are formatted with the correct locale
Best Practices
Do
- ✓ Use appropriate chart types for the data (bar, line, donut)
- ✓ Provide clear axis labels and legends
- ✓ Ensure colors have sufficient contrast for accessibility
Don't
- ✗ Don't use 3D effects that distort data perception
- ✗ Don't overcrowd charts with too many data series
- ✗ Don't forget to handle empty or loading data states