Charts
Which chart to use for a score, a range or a ranking, and the colour, size, motion and accessibility rules that apply to every chart.
The Chart component covers series charts such as bars, lines and areas. This page covers the charts a dashboard adds around them, and the rules every chart follows.
Choose a chart
| Question | Chart |
|---|---|
| How far is this one score from pass or fail? | Gauge, or bullet in a table or a list |
| How did a value move over time, against a target? | Trend line |
| How do the parts of one run compare? | Radar |
| Where did a value land against a target, across runs? | Range plot |
| Which area is best or worst? | Ranked bars |
| How did a value move run by run, with a link to each run? | Sparkbars |
| Where and when did something break, across areas and runs? | Heatmap |
Each chart is followed by its takeaway in text. If a chart has more than a handful of marks and users need exact values, show a Table too.
Gauge
A gauge shows one score from 0 to 100% against thresholds. A Card with the number as text is often enough: use a gauge only when where the score sits between pass and fail matters as much as the number. The value always appears inside the gauge as text, with its status word.
Radar
Sources scores lowest at 64%, and Recall highest at 96%.
A radar compares the dimensions of one run on a shared scale. Use it for up to eight dimensions and one series. To compare runs or sort dimensions, use ranked bars: the eye can't read values off a polygon.
Range plot
A range plot sits in a card and shows the band a value stayed in across runs, one dot per run, against a dashed target and a safe zone. The latest run is the large dot, and its value is the number in the card header.
Bullet
- Recall
- 96% pass
- Precision
- 91% pass
- Dedup
- 78% warn
A bullet shows one value against a target line and the fail, warn and pass ranges, in the height of a table row. Use it where a gauge would repeat down a list. The ranges are neutral greys, so the status colour stays on the value bar.
Trend line
The pass rate first met the 90% target at run 7, and stayed within 3 points of it since.
A trend line shows a value over runs or time, with the target as a dashed line and the safe zone shaded behind it. A line chart may crop its value axis, unlike a bar chart, as long as the axis labels show where it starts.
Ranked bars
Sources is the only area under 70%.
Ranked bars sort areas by value, one bar each, with the value and the status word at the end of the bar.
Sparkbars
Sparkbars show one small bar per run, oldest first, and each bar links to its run. They are a trend, not a measurement: show the latest value in text beside them.
Heatmap
| Run 1 | Run 2 | Run 3 | Run 4 | Run 5 | Run 6 | |
|---|---|---|---|---|---|---|
| Recall | 92% | 94% | 95% | 96% | 96% | 97% |
| Precision | 88% | 90% | 91% | 91% | 92% | 91% |
| Dedup | 70% | 74% | 76% | 79% | 77% | 78% |
| Sources | 58% | 61% | 66% | 62% | 65% | 64% |
Sources failed in every run. Dedup has stayed in warn.
A heatmap shows one value per area and run, so a failure that repeats or spreads stands out. Each cell shows its value in text, so colour is never the only cue.
Do and Don't
Do
- Pick the chart from the question it answers, using Choose a chart.
- Write what the chart shows in one sentence beside it, so the point lands before anyone reads the marks.
- Show each value on or next to its mark, and say pass, warn or fail in words.
- Keep the pass, warn and fail colours for outcomes.
- Look at the chart in the light and dark themes before you approve it.
Don't
- Let colour alone tell series or outcomes apart.
- Mix outcome colours and series colours in one chart.
- Use a gauge for a number that needs no context: write the number.
- Crop a bar chart's axis so a small difference looks large.
- Replay a chart's animation every time its data refreshes.