A NSW Government website
Design System v3.0.5

Data visualisation

Graphs and charts allow data to be comprehended quickly, allowing for faster analysis and conclusions

When to use

Use graphs and charts to easily show relationships, patterns and trends visually between data sets to users. Use the chart or graph type that best tells the story of the data and clearly represents the core insights.

Representing data using graphics can be more widely understood by those with reading disabilities, accessibility needs or those for whom English is not their first language.

Data visualisation can be used when:

  • Comparing data
  • Showing trends
  • Displaying statistics
  • Processes and workflows
  • Mapping and diagramming

Colours and theming

Colour plays a large role in data visualisation to communicate insights.

Use colours from your website’s colour sets. If you need extra colours, use the NSW palette.

Where possible, use either:

  • Shades 01 to 04 of your Brand colour set
  • The same shade (row) across different colours

For corporate websites, your colours are blue, grey, and red. For campaigns and brand-exempt sites, you'll have your own colours.

Colour contrast

The colours in the NSW Design System follow a pattern from the darkest (e.g. Blue 01) to lightest (e.g. Row 04). Prioritise the colours with the best constrast to your background.

Colour examples

Single colour

For charts with a single dataset, you can use just one colour. In most cases, aim to use your brand dark colour, or brand light if the chart sits on a dark background.

Row-02 colours

This example uses multiple colours from row 02 of the brand framework. If you're displaying data side-by-side, such as a pie chart, use colours from the NSW palette. Instructions for developers are below.

Code implementation

The NSW Design System uses charts.js, the leading open-source library, to create charts and graphs. The instructions below show how it can be used in a brand compliant and accessible way.

Installing and Usage

Follow the charts.js installation instructions in their documentation.

Once installed, follow the normal charts.js usage instructions - we'll change some config settings to folow NSW best practice.

Screen readers

Canvas elements cannot be read by screen readers, similar to images. Use the NSW Design System .sr-only class - this will hide elements from screens but allow screen readers to read them. To make your graphs accessible to screen readers, create screen-reader friendly in an .sr-only container, and make sure to include content on the graphic so screen readers can give context to users:

For maximum accessibility, we recommend offering a text-based alternative to all users.

Theming with the NSW Government Palette

Use the design guidance above to decide which colours your chart or graph should use. You can access the full palette via javascript.

First, set fonts and a default theme. These will be the default colours for your charts and graphs, but you can override them if needed.

Setting colours for a specific graph

You can theme each chart or graph individually.

Full Documentation

The information above shows you how to configure charts.js for use in a way that meets the digital brand framework, and the digital standards. For full documentation see the charts.js documentation