Charts

Dependency-free React SVG charts using the DGA categorical palette: BarChart, LineChart, and PieChart, each with an accessible table fallback and RTL support.

Open in Storybook ↗

The three charts share one API: pass data for pie, or series + categories for bar and line. Each renders an accessible table fallback.

When to use

Use BarChart to compare categories, LineChart for change over time, and PieChart for a small number of shares of a whole. Pass series and categories for bar and line, or data for pie.

Keep series counts low so the categorical colors stay distinguishable. For a single headline number, use Metric.

Examples

Bar chart

This quarter

Requests by channel
Series	Portal	App	Kiosk	Phone
This quarter	420	310	90	160

Line chart

Citizens
Businesses

Monthly active users
Series	Jan	Feb	Mar	Apr	May	Jun
Citizens	12	19	22	30	36	44
Businesses	8	11	13	16	21	25

Pie chart

Direct
Search
Referral
Social

Traffic sources
Segment	Value	Share
Direct	45	45%
Search	30	30%
Referral	15	15%
Social	10	10%

Props

Props declared by Charts. Native attributes of the underlying element pass through.

<BarChart>

Prop	Type	Default	Description
`palette`	`Palette`		Colour set: DGA categorical (default) or the monochrome brand-green sequence.
`legend`	`boolean`	`true`	Show the legend.
`title`	`string`		Accessible name for the chart (also the data-table caption).
`series`required	`ChartSeries[]`
`categories`required	`string[]`
`xAxisLabel`	`string`		X-axis title.
`yAxisLabel`	`string`		Y-axis title (rotated).
`yMax`	`number`		Force the Y-axis maximum (default: auto, rounded to a nice value).
`width`	`number`		viewBox width / height. Charts scale responsively to their container.
`height`	`number`
`stacked`	`boolean`		Stack series into one column per category (default). `false` groups them side by side.

<LineChart>

Prop	Type	Default	Description
`palette`	`Palette`		Colour set: DGA categorical (default) or the monochrome brand-green sequence.
`legend`	`boolean`	`true`	Show the legend.
`title`	`string`		Accessible name for the chart (also the data-table caption).
`series`required	`ChartSeries[]`
`categories`required	`string[]`
`xAxisLabel`	`string`		X-axis title.
`yAxisLabel`	`string`		Y-axis title (rotated).
`yMax`	`number`		Force the Y-axis maximum (default: auto, rounded to a nice value).
`width`	`number`		viewBox width / height. Charts scale responsively to their container.
`height`	`number`
`area`	`boolean`	`true`	Draw a soft area gradient under each line.
`curve`	`"linear" \| "smooth"`		A smooth Catmull-Rom curve (SDGA "Gradual" default) or straight segments.

<PieChart>

Prop	Type	Default	Description
`palette`	`Palette`		Colour set: DGA categorical (default) or the monochrome brand-green sequence.
`legend`	`boolean`	`true`	Show the legend.
`title`	`string`		Accessible name for the chart (also the data-table caption).
`data`required	`ChartSlice[]`
`donut`	`boolean`		Render a donut (50% hole) instead of a full pie.
`size`	`number`	`240`	Disk diameter in px.

Accessibility

Each chart renders role="img" with an accessible name and a visually hidden data table, so screen reader users get the actual values.

Colors come from the DGA categorical scale, and legends use text labels, not color alone. Axes and labels follow the page direction in RTL.