Charts

Data visualisation

Fourteen chart types built with Recharts and the shadcn chart wrapper, all drawing from the five-colour Violet Bloom palette. Tooltips, legends and dark mode follow the theme automatically.

The palette

Five chart tokens, used in this order. Keep the order consistent across a dashboard so a colour always means the same thing.

1var(--chart-1)Green — success, positive
2var(--chart-2)Violet — the primary series
3var(--chart-3)Orange — warning, retried
4var(--chart-4)Blue — comparison, target
5var(--chart-5)Grey — neutral, other

Trend over time

Line and area charts. Reach for these whenever the x-axis is time.

Line
Single series, monthly revenue
Multi-line
Revenue vs. target vs. cost
Area
Gradient fill emphasises volume
Stacked area
Composition of runs over the week

Comparison

Bars compare discrete categories. Stack them for composition, lay them flat when labels are long.

Grouped bar
Runs by outcome, past week
Stacked bar
Same data, as a total per day
Horizontal bar
Best when category names are long
Composed
Bars for cost, line for revenue

Composition

Parts of a whole. Keep the number of slices low — four or five, then an 'other'.

Donut
With a total in the middle
Pie
Solid, with a legend
Radial bar
Health score per client

Relationships & profiles

For correlation and multi-dimensional comparison.

Radar
Automation profile vs. benchmark
Scatter
Runs vs. average runtime

Hand-rolled marks

Not everything needs a charting library. These are plain CSS and SVG — crisper at small sizes and far cheaper.

Heatmap
When automations run, by day and hour
MonTueWedThuFriSatSun
000408121620
Funnel
From intake call to production
Intake calls120
Proposals sent7462%
Pilots started3832%
In production2118%
Sparklines & micro-bars
For metric cards and table cells — see Metrics & KPIs for the full set.

Filled sparkline

Line only

Micro-bars