Charts
One component per chart, one shared set of axis props. Pass data with a label and a value for a single series, or add series when you compare several.
LineChart: one series
Component Source
<LineChart data={[{ label: "Mon", value: 120 }, { label: "Tue", value: 148 }]} />LineChart: area, no y axis
Component Source
<LineChart type="area" data={trend} height={120} showYAxis={false} />LineChart: step
Component Source
<LineChart curve="step" data={balance} />LineChart: several series
WebiOSAndroid
Component Source
<LineChart data={rows} series={series} />LineChart: stacked area
WebiOSAndroid
Component Source
<LineChart type="area" stacked data={rows} series={series} />BarChart: one series, per-bar tone
Component Source
<BarChart data={[{ label: "Mon", value: 24, tone: "success" }, { label: "Tue", value: 12 }]} />BarChart: negative values
Component Source
<BarChart data={[{ label: "Mon", value: 24 }, { label: "Tue", value: -12 }]} />BarChart: ranking
Component Source
<BarChart orientation="horizontal" data={ranked} yFormat="compact" />BarChart: compare two periods
This weekLast week
Component Source
<BarChart data={compare} series={[{ key: "thisWeek", name: "This week" }, { key: "lastWeek", name: "Last week", tone: "neutral" }]} />BarChart: horizontal and stacked
WebiOSAndroid
Component Source
<BarChart orientation="horizontal" mode="stacked" data={rows} series={series} />Sparkline
Axis-free and decorative: it fills its container, so size it with className.
Axis-free and decorative: it fills its container, so size it with className.
<Sparkline data={[4, 7, 5, 9, 12, 10, 14]} className="h-10 w-32" />
<Sparkline type="bar" tone="success" data={[3, 5, 2, 8, 6, 9]} className="h-12 w-40" />Heatmap
9
11
13
15
17
19
Mon
45
61
77
93
109
125
Tue
101
117
45
61
77
93
Wed
69
85
101
117
45
61
Thu
125
53
69
85
101
117
Fri
93
109
125
53
69
85
Sat
36
52
68
84
100
28
Sun
92
20
36
52
68
84
Component Source
<Heatmap rows={days} columns={hours} values={grid} />FunnelChart: both directions
1. Visited pricing24,800
2. Started sign-up6,900 · 72% drop
3. Verified email5,100 · 26% drop
4. Connected a source2,780 · 45% drop
5. Viewed dashboard2,310 · 17% drop
24,800
Visited pricing
100%
6,900−72%
Started sign-up
28%
5,100−26%
Verified email
21%
2,780−45%
Connected a source
11%
2,310−17%
Viewed dashboard
9.3%
Component Source
<FunnelChart steps={steps} />
<FunnelChart orientation="vertical" steps={steps} />DonutChart
Accounts914
Free640 70%
Team210 23%
Business64 7%
Component Source
<DonutChart centerLabel="Accounts" data={plans} />LineChart props
| Prop | Type | Default | Description |
|---|---|---|---|
| curve | "linear" | "smooth" | "step" | — | `step` holds each value until the next point (balances, plans, queue depth). |
| data* | Record<string, any>[] | — | One record per x position: `label` plus a number under each series `key` (`value` when `series` is omitted). |
| height | number | — | Chart height in px (default 260). |
| padding | ChartPadding | — | Plot padding in px, merged over the defaults. |
| series | SeriesSpec[] | — | Omit for a single series of `value`s. |
| showDots | boolean | true | Draw a dot on every point (default true when 16 points or fewer). |
| showGrid | boolean | — | — |
| showLegend | boolean | — | — |
| showXAxis | boolean | — | — |
| showYAxis | boolean | — | — |
| stacked | boolean | — | Stack the series on top of each other instead of overlaying them. |
| tickCount | number | — | Number of y-axis intervals (default 4, so 5 ticks). |
| type | "line" | "area" | — | `area` fills under each line (stacked areas when `stacked`). |
| xLabelEvery | number | — | Show every Nth x label, starting with the first (default 1). |
| xLabelEveryMobile | number | — | Below the md breakpoint show every Nth label instead (hides the rest on small screens). |
| xLabels | string[] | — | Explicit x labels to show (matched against each datum's `label`); overrides the stride props. |
| yFormat | "number" | "compact" | "currency" | "percent" | — | — |
| yMax | number | — | Fixed y-axis maximum; defaults to a rounded data maximum. |
| yPrefix | string | — | — |
| ySuffix | string | — | — |
* required
BarChart props
| Prop | Type | Default | Description |
|---|---|---|---|
| barGap | number | — | Gap between categories in px (default: 30% of the slot). |
| barRadius | ChartBarRadius | sm | Bar corner radius token (default "sm"). |
| data* | Record<string, any>[] | — | One record per category: `label` plus a number under each series `key`. Without `series`, the number is `value`, and a datum may carry its own `tone` or `color`. |
| height | number | — | Chart height in px (default 260). |
| maxBarWidth | number | — | Maximum bar width in px. |
| mode | "grouped" | "stacked" | — | `grouped` puts the series side by side per category (comparison); `stacked` adds them up. |
| orientation | "vertical" | "horizontal" | — | `horizontal` puts categories on the y axis, good for long labels and rankings. |
| padding | ChartPadding | — | Plot padding in px, merged over the defaults. |
| series | SeriesSpec[] | — | Omit for a single series of `value`s. |
| showGrid | boolean | — | — |
| showLegend | boolean | — | — |
| showXAxis | boolean | — | — |
| showYAxis | boolean | — | — |
| tickCount | number | — | Number of y-axis intervals (default 4, so 5 ticks). |
| xLabelEvery | number | — | Show every Nth x label, starting with the first (default 1). |
| xLabelEveryMobile | number | — | Below the md breakpoint show every Nth label instead (hides the rest on small screens). |
| xLabels | string[] | — | Explicit x labels to show (matched against each datum's `label`); overrides the stride props. |
| yFormat | "number" | "compact" | "currency" | "percent" | — | — |
| yMax | number | — | Fixed y-axis maximum; defaults to a rounded data maximum. |
| yPrefix | string | — | — |
| ySuffix | string | — | — |
* required
Sparkline props
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | SparklinePoint[] | — | Numbers, or objects with a `value` (and an optional per-bar `tone` / `color`). |
| type | "line" | "area" | "bar" | line | Default "line". |
| tone | ChartTone | accent | Colour of the line, area or bars. Default accent. |
| curve | "linear" | "smooth" | smooth | Line and area only. Default "smooth". |
| barRadius | ChartBarRadius | sm | Bar corner radius token (default "sm"). |
| barGap | number | 4) | Gap between bars in px (default 4). |
* required
Heatmap props
| Prop | Type | Default | Description |
|---|---|---|---|
| rows* | string[] | — | — |
| columns* | string[] | — | — |
| values* | (number | null)[][] | — | `values[row][column]`. Use `null` for cells with no data (they stay empty, like the lower triangle of a cohort table). |
| tone | "accent" | "success" | "warning" | "danger" | — | Colour of the filled cells (a theme tone). |
| max | number | — | Value that maps to full intensity; defaults to the largest value. |
| format | ChartYFormat | — | — |
| showValues | boolean | true) | Print the value inside each cell (default true). |
| minColumnWidth | number | — | Narrowest a column may get before the heatmap scrolls sideways, in px. |
| labelWidth | string | — | Width of the row label column. |
| rowLabelTitle | string | — | — |
* required
FunnelChart props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps* | FunnelStep[] | — | — |
| orientation | "horizontal" | "vertical" | — | `horizontal` stacks a bar per step; `vertical` draws a column per step, left to right. |
| centered | boolean | — | `centered` (horizontal only) centres each bar so the stack narrows like a funnel. |
| height | number | — | Height of the columns in px (vertical). |
| showDropOff | boolean | true) | Show the drop-off between steps (default true). |
* required
DonutChart props
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | DonutDatum[] | — | — |
| size | number | 160) | Diameter in px (default 160). |
| thickness | number | 18) | Ring thickness in px (default 18). |
| centerLabel | string | — | Small text in the centre, above the value. |
| centerValue | ReactNode | — | Large text in the centre. Defaults to the total. |
| showLegend | boolean | — | — |
* required