Areas
Charts
Charts drawn in SVG that read your data as plain rows, format numbers in the language of the page and stay readable for keyboards and screen readers.
On this page
Pick a chart#
22 charts with 86 variants live in the categories Charts, Comparison charts, Statistical charts and KPI, live and map charts. Choose by the question your chart should answer.
| Component | Variants | What it does |
|---|---|---|
| line-chart | single, multi, comparison, straight-dots | A value over time, one or a few series. |
| area-chart | simple, gradient, stacked | Volume over time, stacked parts of a whole. |
| bar-chart | simple, grouped, stacked, horizontal | Compare categories, grouped or stacked. |
| ranking-chart | lollipop, bump, race, dot-plot, leaderboard | Who leads and how the order changes. |
| comparison-chart | slope, butterfly, diverging, ab-test, indexed | Two states or groups compared, before and after, A and B. |
| donut-chart | donut, half, compact | A few shares of one whole. |
| proportion-chart | stacked, columns, marimekko, likert | Shares in stacks, columns, a Marimekko or a Likert scale. |
| treemap | squarified, grouped, drilldown, change, compare | Many shares in a hierarchy. |
| waterfall-chart | bridge, subtotals, horizontal, cashflow | How a start value becomes an end value, step by step. |
| scatter-chart | dots, groups, trend, quadrant, bubble | Relation of two values, groups, trends and quadrants. |
| distribution-chart | histogram, box-plot, density, strip, percentiles | How values spread, from histogram to box plot. |
| radar-chart | profile, compare, with-list, multiples, target | Profiles across several criteria. |
| gauge | needle, zones, segmented, dial, row | One value against its scale and zones. |
| bullet-chart | rows, columns, table, scorecard | A value against target and ranges, compact in rows. |
| radial-chart | hours, rose, clock-heatmap, sunburst | Hours, cycles and hierarchies on a circle. |
| heatmap | calendar, matrix | Patterns in a calendar or a matrix. |
| funnel | columns, bars | Steps where people drop out. |
| candlestick-chart | candles, with-volume, ranges, ohlc | Prices with open, high, low and close. |
| region-map | regions, diverging, hex-tiles, symbols | Values by region on a drawn map. |
| live-chart | line, bars, events, multi, latency | Data that keeps arriving. |
| sparkline | inline, kpi-row | A small trend inside text, a table or a card. |
Infographics and numbers told as a story live under data stories, finished overviews under dashboards.
Data as props#
Line, bar and area charts read rows. Each row is an object, xKey names the axis and series the values to draw. Data from an API or a spreadsheet goes into the chart without reshaping.
import { LineChart } from '@/components/ui/line-chart';
<LineChart
label="Bookings 2026"
summary="Bookings rise from 412 in January to 538 in June."
data={[
{ month: '2026-01', bookings: 412, last: 380 },
{ month: '2026-02', bookings: 436, last: 391 },
{ month: '2026-03', bookings: 470, last: 402 },
{ month: '2026-04', bookings: 488, last: 415 },
{ month: '2026-05', bookings: 512, last: 430 },
{ month: '2026-06', bookings: 538, last: 446 },
]}
xKey="month"
series={[
{ key: 'bookings', label: 'Bookings' },
{ key: 'last', label: '2025', dashed: true },
]}
/>The other charts take the shape of their data, such as steps for the waterfall, data with x and y for the scatter chart or zones for the gauge. Every field is typed at the top of each file.
Title, figure and source#
The newer charts share a frame from chart-figure. Title, the big number with its change, a note and the source are plain props, each one optional.
import { WaterfallChart } from '@/components/ui/waterfall-chart';
<WaterfallChart
variant="subtotals"
label="From revenue to profit, 2026"
title="Profit 2026"
value="€182,400"
delta={{ value: '+8.2%', trend: 'up', note: 'vs. 2025' }}
source="Internal figures, rounded to the hundred"
format={{ style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }}
steps={[
{ label: 'Revenue', value: 640000, kind: 'total' },
{ label: 'Materials', value: -214000 },
{ label: 'Gross profit', value: 0, kind: 'subtotal' },
{ label: 'Staff', value: -198000 },
{ label: 'Rent', value: -45600 },
{ label: 'Profit', value: 0, kind: 'subtotal' },
]}
/>| Prop | Type | Default | What it does |
|---|---|---|---|
| title | string | · | Small title above the chart. |
| value | string | · | The one big number, already formatted. Counts up once when it scrolls in. |
| delta | { value, trend: 'up' | 'down' | 'flat', good?, note? } | · | The change, with an arrow. good decides the color, not the direction. |
| meta | string | · | Short note on the right, such as a period. |
| source | string | · | Source or footnote below the chart. |
| framed | boolean | true | Card surface. false sets the chart into a card of your page. |
Number formats#
Every chart formats values with Intl.NumberFormat in the language of KitProvider. format takes the same options, such as currency, percent or unit. Axes shorten large numbers to 12K or 1.2M by themselves. Pass dates as 2026-03 or 2026-03-14, the labels follow the language.
import { KitProvider } from '@/lib/kit';
import { Gauge } from '@/components/ui/gauge';
<KitProvider locale="de">
<Gauge
variant="zones"
label="Auslastung der Küche"
value={0.74}
format={{ style: 'percent', maximumFractionDigits: 0 }}
zones={[
{ to: 0.6, label: 'Ruhig', tone: 'good' },
{ to: 0.85, label: 'Voll', tone: 'watch' },
{ to: 1, label: 'Am Limit', tone: 'critical' },
]}
/>
</KitProvider>Accessibility and data table#
Every chart is a named group with a sentence on what it shows. With the keyboard you step through the values with the arrow keys, and the current value is announced. Below it, screen readers find the full data as a table, with the same formats as the picture.
| Prop | Type | Default | What it does |
|---|---|---|---|
| label | string | · | Name of the chart, read first. Required for line, bar and area charts. |
| summary | string | · | One sentence on what the chart shows. Without it the kit writes one from the data. |
| labels | Partial<ChartTexts> | · | Your own wording for the hint, totals and legends. |
| animate | boolean | true | Draw the chart in once it scrolls into view. Never with reduced motion. |
Colors#
The first series carries the accent, the second a calm grey, further series lighter steps of the accent. Areas such as heatmaps and maps use a ramp of five steps. Everything is mixed from --primary and follows the accent, light and dark by itself. Set your own color per series with color in series.
Gains and losses always carry a sign, an arrow or a filled and hollow mark as well. Green and red alone do not part for everyone.
More on accent and tokens under theming.