Skip to content
Kinetixui

Data viz

Charts

The Chart component wraps Recharts and drives colour from the --chart-1…8 tokens, so a chart re-themes with the rest of the system. Thirty-six recipes below — the cartesian and radial staples, plus KPI tiles, funnel, gauge, treemap, waterfall, bullet, histogram, two heatmaps, sankey, candlestick, box plot, bump, dumbbell, 100%-stacked area, a brush/zoom range, an interactive legend, pattern fills, number formatting, and loading / empty / error states. Copy one and swap the data. npx @kinetixui/cli add chart. The native ports carry the common types too — SwiftUI over the system Charts framework, Flutter as a hand-drawn bar chart. For accessibility, cartesian recipes pass accessibilityLayer for keyboard data-point navigation, and ChartContainer takes a label text alternative plus an optional srTable of the raw numbers.

Bar

Grouped bars, one series per --chart token.

Line

Same data, connected points with dots.

Area (stacked)

Stacked areas with a soft fill.

Donut

Category share, one colour per slice, with a legend.

Horizontal bar

Ranked categories — swap the axes with layout="vertical".

Radar

A single series across several axes.

Stacked bar

One bar per category, series stacked with a shared stackId.

Composed (bar + line)

Two encodings on one plot — bars for volume, a line for the rate.

Step line

A staircase for stepwise data — type="step".

Sparkline

Axis-less, grid-less mini trend — drop it in a Card or a Metric.

Pie (with labels)

Full pie, value labels on each slice.

Radial bar

Concentric arcs — a circular take on a ranked bar chart.

Scatter

Two continuous axes — one point per observation.

KPI tiles

Headline number + period delta + a bare sparkline. The dashboard workhorse.

MRR

$48.2k

▲ 12.4%

Active users

9,310

▲ 4.1%

Churn

1.8%

▼ 0.3%

p95 latency

132 ms

▼ 6%

Funnel

Stage-to-stage drop-off. Each band is one --chart token.

Gauge

One value against a 0–100 range — a radial bar with a centred read-out.

72

Treemap

Part-to-whole by area — good for bundle size, spend, storage.

Waterfall

Running total with up / down steps — a P&L bridge. Invisible base bar + a coloured delta.

Bullet

Actual vs target vs qualitative bands — a compact KPI row. ReferenceArea bands + a target line.

Histogram

Distribution of one variable — bin the samples, then it's a bar chart.

Reference lines & bands

Annotate a series — a target line and an SLA band via ReferenceLine / ReferenceArea.

Heatmap

A value grid — no Recharts primitive, just a CSS grid tinted by --chart-1.

100% stacked area

Share of total over time — AreaChart with an expand stack offset.

Brush + zoom

A long series with a draggable range selector underneath.

Interactive legend

Click a legend entry to mute or restore its series — state lives in the page, the legend is buttons.

Pattern fills

Texture, not just hue — SVG <pattern> defs so stacked series stay distinct for colour-blind readers.

Sankey

Flow between nodes — here the token pipeline: source → compiler → outputs → components.

Candlestick / OHLC

Open-high-low-close ranges — a thin wick bar plus a body bar, coloured by direction.

Box plot

Distribution per group — whisker bar (min–max), IQR box (q1–q3), median dot.

Bump / rank

Ranking over time — Y axis reversed so #1 sits on top.

Dumbbell

Two points per row with a connector — before vs after, min vs max.

Eight series

The full --chart-1…8 categorical ramp on one stacked bar.

Number formatting

Axis and tooltip formatters — compact, currency, percent — via Intl.NumberFormat.

Loading / empty / error

ChartContainer state prop — a shimmer, a message, or an alert in place of the chart.

SR data table

A visually-hidden <table> of the numbers for screen readers — pass srTable to ChartContainer.

Calendar heatmap

Contribution-graph grid — 26 weeks × 7 days, tinted by count. Pure CSS grid, no Recharts.

Token-driven — same chart, both themes

One component, no colour literals. Each panel just sets a theme class on its wrapper; the bars pick up that scope's --chart-1…5.

light

dark