Charts
Every chart is keyboard navigable: tab to a chart, then use the arrow keys to move between points — each one is read aloud. Press “Show data table” under any chart to see the numbers as a table. Colours follow the theme and charts mirror in RTL.
Keyboard: press Tab to focus a chart, then Arrow Left / Right to move between points and Arrow Up / Down to switch series. Home and End jump to the ends, Escape hides the tooltip. Every chart also has a “Show data table” button.
15 components on this page. Every demo is live — change the theme in the header or flip a demo to right-to-left with its RTL button. These components are React-only for now; Vue, Svelte and Angular versions are coming.
BarChart Link to BarChart
Grouped or stacked bars, vertical or horizontal.
Code
ReactComing to Vue, Svelte and Angular.
<BarChart title="Revenue by quarter" data={revenue} x="quarter"
series={[{ key: 'product', label: 'Product' }, { key: 'services', label: 'Services' }]}
valueFormat={{ style: 'currency', currency: 'USD', notation: 'compact' }} />LineChart Link to LineChart
Trends over time with band, time or linear x scales and smooth or step curves.
Code
ReactComing to Vue, Svelte and Angular.
<LineChart title="Monthly active users" data={users} x="month" curve="monotone"
series={[{ key: 'web', label: 'Web' }, { key: 'mobile', label: 'Mobile' }]}
valueFormat={{ notation: 'compact' }} />AreaChart Link to AreaChart
Stacked or overlapping areas with optional gradient fill.
Code
ReactComing to Vue, Svelte and Angular.
<AreaChart title="Traffic by source" data={traffic} x="day" mode="stacked" gradient
series={[{ key: 'organic', label: 'Organic' }, { key: 'social', label: 'Social' }, { key: 'paid', label: 'Paid' }]} />ComboChart Link to ComboChart
Bars and lines together, with an optional secondary axis.
Code
ReactComing to Vue, Svelte and Angular.
<ComboChart title="Orders and conversion" data={orders} x="month"
series={[{ key: 'orders', label: 'Orders', type: 'bar' },
{ key: 'conversion', label: 'Conversion', type: 'line', axis: 'secondary' }]}
secondaryFormat={{ style: 'percent' }} />PieChart Link to PieChart
Parts of a whole; small slices are grouped into “Other”.
Code
ReactComing to Vue, Svelte and Angular.
<PieChart title="Traffic sources" data={sources} label="source" value="visits" />DonutChart Link to DonutChart
A pie with a hole for a headline number.
Code
ReactComing to Vue, Svelte and Angular.
<DonutChart title="Plan mix" data={plans} label="plan" value="users"
centerLabel="12.4k" centerSubLabel="users" />ScatterChart Link to ScatterChart
Relationships between two measures, grouped by category with distinct marker shapes.
Code
ReactComing to Vue, Svelte and Angular.
<ScatterChart title="Session length vs pages" data={sessions} x="minutes" y="pages"
group="device" pointLabel="id" xLabel="Minutes" yLabel="Pages" />BubbleChart Link to BubbleChart
A scatter chart whose point size encodes a third value.
Code
ReactComing to Vue, Svelte and Angular.
<BubbleChart title="Markets" data={markets} x="growth" y="margin" size="revenue"
pointLabel="country" xLabel="Growth %" yLabel="Margin %" sizeLabel="Revenue" />RadarChart Link to RadarChart
Compare several series across the same set of dimensions.
Code
ReactComing to Vue, Svelte and Angular.
<RadarChart title="Framework scores" data={scores} x="metric" max={10}
series={[{ key: 'pelagic', label: 'Pelagic UI' }, { key: 'other', label: 'Average' }]} />Heatmap Link to Heatmap
Values on a grid of two categories — plus calendarHeatmapData() for GitHub-style calendars.
Code
ReactComing to Vue, Svelte and Angular.
<Heatmap title="Visits by hour" data={visits} x="hour" y="day" value="count" showValues />
const cal = calendarHeatmapData(commits);
<Heatmap title="Contributions" {...cal} x="week" y="weekday" value="value" cellLabel="label" />GaugeChart Link to GaugeChart
A single value against a range, with coloured thresholds and a target.
Code
ReactComing to Vue, Svelte and Angular.
<GaugeChart title="Server load" value={72} target={80} valueFormat={{ style: 'unit', unit: 'percent' }}
thresholds={[{ upTo: 60, tone: 'success' }, { upTo: 85, tone: 'warning' }, { upTo: 100, tone: 'danger' }]} />RadialProgress Link to RadialProgress
A full-circle gauge for goals and completion.
Code
ReactComing to Vue, Svelte and Angular.
<RadialProgress title="Quarterly goal" value={68} max={100} size={160} />WaterfallChart Link to WaterfallChart
How a starting value becomes an ending value through increases and decreases.
Code
ReactComing to Vue, Svelte and Angular.
<WaterfallChart title="Profit bridge" valueFormat={{ style: 'currency', currency: 'USD', notation: 'compact' }}
data={[{ label: 'Revenue', value: 420000, total: true }, { label: 'COGS', value: -160000 }, { label: 'Profit', value: 260000, total: true }]} />Sparkline Link to Sparkline
A tiny inline trend line for tables and stat cards.
Code
ReactComing to Vue, Svelte and Angular.
<Sparkline data={[12, 14, 13, 17, 19, 18, 24]} label="Signups" period="last 7 days" area showEnd />Chart primitives Link to Chart primitives
Build your own chart from ChartContainer, ChartPlot, scales, Axis, Gridlines, series, ReferenceLine, Annotation and Legend — accessibility included.
Code
ReactComing to Vue, Svelte and Angular.
<ChartContainer title="Visitors" tableData={table}>
{(frame) => {
const x = bandScale(days, frame.rtl ? [frame.innerWidth, 0] : [0, frame.innerWidth]);
const y = linearScale([0, max], [frame.innerHeight, 0], { nice: true });
return (
<ChartPlot points={[days.map((d, i) => ({ x: x.center(d), y: y(values[i]), title: d, series: 'Visitors', value: String(values[i]) }))]}>
<Gridlines scale={y} orientation="horizontal" />
<BarSeries bars={days.map((d, i) => ({ x: x(d), y: y(values[i]), width: x.bandwidth, height: y(0) - y(values[i]) }))} />
<ReferenceLine y={y(target)} label="Target" dashed />
<Axis scale={x} position="bottom" />
<Axis scale={y} position="start" />
</ChartPlot>
);
}}
</ChartContainer>