Charts
DraftA set of data visualisation components for presenting quantitative information as graphical displays.
- Usage
- Specs
- Content
- Status & changelog
- Code
Common alternative names
Data visualization, graphs, plots
Usage guidelines coming soon.
Specs coming soon.
Content guidelines coming soon.
Status & changelog coming soon.
Available chart types
Bar Chart
Compares discrete categories using horizontal or vertical bars. Best for showing rankings, comparisons across groups, or changes over a small number of time periods.
import { BarChart } from '@arch-ui/components';
<BarChart
caption="Revenue by quarter"
data={[
{ label: 'Q1', value: 12000 },
{ label: 'Q2', value: 18500 },
{ label: 'Q3', value: 15200 },
{ label: 'Q4', value: 21000 },
]}
/>
Line Chart
Displays trends over a continuous axis (typically time). Best for showing change over time, growth rates, or comparing multiple series.
import { LineChart } from '@arch-ui/components';
<LineChart
caption="Daily active users"
series={[
{ label: 'Mobile', data: [120, 150, 180, 200, 175] },
{ label: 'Desktop', data: [90, 85, 95, 110, 105] },
]}
xLabels={['Mon', 'Tue', 'Wed', 'Thu', 'Fri']}
/>
Area Chart
Similar to a line chart but with the area below the line filled, emphasising volume or cumulative totals.
import { AreaChart } from '@arch-ui/components';
<AreaChart
caption="Storage usage over time"
data={[10, 25, 40, 55, 70, 68, 75]}
xLabels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']}
/>
Pie / Donut Chart
Shows proportions of a whole. Use when there are fewer than six segments and the goal is to show relative share.
import { DonutChart } from '@arch-ui/components';
<DonutChart
caption="Traffic sources"
data={[
{ label: 'Organic', value: 45 },
{ label: 'Paid', value: 30 },
{ label: 'Referral', value: 15 },
{ label: 'Direct', value: 10 },
]}
/>
Expected common props
| Prop | Type | Default | Description |
|---|---|---|---|
caption | string | -- | Accessible description of the chart. Required. |
data | DataPoint[] | Series[] | -- | The data to visualise. Shape varies by chart type. Required. |
height | number | string | 300 | Chart height. |
colorScale | string[] | -- | Custom colour palette. When omitted, uses the design system's categorical colour tokens. |
showLegend | boolean | true | When true, renders a legend. |
showTooltip | boolean | true | When true, hovering a data point shows a tooltip with the exact value. |
animate | boolean | true | When true, the chart animates on initial render. |
className | string | -- | Additional class names. |
Design guidance
- Use colour tokens -- chart colours should come from the design system's categorical palette tokens rather than arbitrary hex values. This ensures consistency and accessibility across themes.
- Always provide a caption -- even though charts are visual, the caption gives screen readers and search engines context.
- Limit categories -- pie and donut charts work best with fewer than six segments. For more categories, use a bar chart.
- Label axes -- line and bar charts should include axis labels that clarify what the numbers represent.
Accessibility
- Every chart renders a
captionoraria-labeldescribing its purpose. - Data points should be reachable via keyboard. Each segment, bar, or point is focusable and reveals a tooltip on focus.
- Charts should include a visually hidden data table fallback so screen reader users can access the underlying data.
- Colour alone should not be the only differentiator between series. Use pattern fills, labels, or distinct marker shapes alongside colour.
- Animations respect
prefers-reduced-motion: reduce.