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
Chart peripheral colour use example

1-colour chart

  • Use a 3px wide stroke for graph lines
1-colour chart example
  • Use DarkBlue for visual elements
G1-colour graph example

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 the regions
  • Do not cross graph lines
  • Provide filtering when the number of items exceeds 6
Multi-colour chart example

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.