Graphs and charts allow data to be comprehended quickly, allowing for faster analysis and conclusions
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:
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:
For corporate websites, your colours are blue, grey, and red. For campaigns and brand-exempt sites, you'll have your own colours.
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.
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.
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.
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.
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.
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.
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.
You can theme each chart or graph individually.
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