Data Visualisation

Practical patterns for charts and metrics that stay readable, honest, and accessible.

01 — Foundation

Charts support decisions — they are not decoration

If the number matters, users must be able to read it without decoding a rainbow.

Data visualisation turns metrics into insight. Done poorly, it hides truth behind chart junk, colour-only encoding, and animations that impress stakeholders but confuse everyone else. Start with whether a table already answers the question.

02 — Choose

Table first, chart when it helps

Precise comparison usually belongs in a table — charts show shape and trend.

  • use tables for exact values, sorting, and export — see Tables
  • use line charts for change over time; bar charts for category comparison
  • avoid pie charts for more than a few slices — labels overlap and comparisons fail
  • one main message per chart — not six metrics fighting for attention

03 — Accessible

Accessible data presentation

Colour alone is not a data strategy.

  • text labels, values, or a data table alternative for screen reader users
  • sufficient contrast; patterns or icons alongside colour for series
  • meaningful titles and axis labels — not “Chart 1”
  • respect reduced motion; do not animate bars for drama 
<table>
    <caption>Monthly revenue (GBP)</caption>
    <thead>
        <tr><th scope="col">Month</th><th scope="col">Revenue</th></tr>
    </thead>
    <tbody><!-- data rows --></tbody>
</table>

04 — Honesty

Honest scales and context

Misleading axes destroy trust faster than ugly colours.

  • start bar chart baselines at zero unless a broken axis is clearly labelled
  • show units, date ranges, and filters applied to the data
  • empty and error states when data fails to load — not a blank canvas
  • loading per widget on dashboards — not one spinner for everything

05 — Review

Before you approve

A short checklist for data visualisation in code review.

  • the chart type fits the question; exact data is available elsewhere
  • not colour-only; labels and contrast hold up
  • scales and context are honest; loading and errors are handled