Data Visualization

This article provides basic guidelines on how to use NDS with charts.

Chart peripheral colours

• Use darkGrey for primary and Grey for peripheral chart colours
• Use 1px wide stroke

1-colour chart

• Use a 3px wide stroke for graph lines

• Use DarkBlue for visual elements

Multi-colour chart

• Use categorical colours in the assigned order:
  • Categorical1 (Aqua)
  • Categorical2 (Purple)
  • Categorical3 (Pink)
  • Categorical4 (Turquoise)
  • Categorical5 (Orange)
  • Categorical6 (Avocado)
• Use 3px wide stroke
• Allow 3px between regions
• Do not cross graph lines
• Provide filtering when the number of items exceeds 6

Accessibility

Categorical colours are selected to provide everyone with as optimal experience as possible, including those with colour defencies and those viewing printed materials. Note that not all the colours in the palette meet WCAG AA contrast ratio on a white background so it is recommended to provide additional mechanisms beyond colour for comprehensions.

Related links

• Colours
• Spectrum - Data visualization fundamentals