Charts
Lightweight SVG chart primitives. Every sample below is exhaustive — each labeled row shows every severity, size, and state.
Sparkline
Tiny inline line or area chart. Every severity, both variants, and each feature flag.
<Sparkline data={[10, 12, 11, 14, 18]} severity="primary" variant="area" showLast />MiniBarChart
Inline micro bar chart. Every severity plus the last-bar highlight and sizes.
<MiniBarChart data={[4, 8, 12, 6, 9, 15]} severity="primary" highlightLast />ProgressRing
Circular progress. Every severity, a value progression, the indeterminate state, a custom center slot, and sizes.
<ProgressRing value={72} severity="primary" showValue />Gauge
Half-circle gauge. Every severity, with and without a label, min/max end labels, and multi-colour segments.
<Gauge value={82} severity="success" showValue label="Health" showLabels />TrendChart
Dashboard-sized trend. Every severity, plus axis labels, line-only, and straight segments.
<TrendChart data={series} severity="primary" showAxis />AreaChartMini
Area-only variant of TrendChart for KPI tiles. Every severity.
<AreaChartMini data={series} severity="primary" />LineChart
Full line chart on the visx engine — single or multi-series, axes, grid, legend, and hover tooltip. Series colours resolve to brand/severity tokens, so it re-skins per theme.
- Pemasukan
- Pengeluaran
<LineChart data={data} xKey="month"
series={[{ key: "pemasukan", label: "Pemasukan", severity: "primary" },
{ key: "pengeluaran", label: "Pengeluaran", severity: "warning" }]}
showGrid showLegend showTooltip />AreaChart
Area chart with token-coloured gradient fills. Overlay by default, or stacked.
- Pemasukan
- Pengeluaran
- Pemasukan
- Pengeluaran
<AreaChart data={data} xKey="month" series={series} stacked showLegend />BarChart
Bar chart — grouped or stacked, each optionally horizontal. Same data/xKey/series API as Line and Area.
- Pemasukan
- Pengeluaran
- Pemasukan
- Pengeluaran
- Pemasukan
- Pengeluaran
<BarChart data={data} xKey="team" series={series} variant="stacked" horizontal />