Charts and graphs

About this guidance

This guidance helps teams choose and design charts and graphs that communicate data clearly and consistently across NSW digital products. This guidance was previously titled ‘Data visualisation’. The rename to ‘Charts and graphs’ aligns with the NSW Brand Toolkit and reflects the current scope of this guidance.

It covers common chart types used in services and dashboards, including bar charts, line charts, scatter plots and similar formats. The guidance is tool-agnostic and applies regardless of charting library or platform.

It sets shared principles for clarity, accessibility and consistency rather than prescribing exact implementation. Teams using custom visualisation tools such as D3 should apply the same principles to ensure charts remain understandable and accessible.

Out of scope

• Expressive infographics designed for campaigns or marketing
• Advanced analytical visualisations such as network graphs or complex relationship mapping
• Interactive GIS mapping
• Highly specialised investigative tools built for internal compliance work

These use cases may require bespoke design and technical decisions beyond the scope of the design system. Future guidance may expand to cover additional visualisation types as needs mature.

Principles

These principles apply to all charts and graphs in NSW digital products.

1. Start with the story, not the chart

Each chart type is designed to reveal a specific kind of relationship in data, and choosing the wrong one obscures the message rather than clarifying it.

The most common relationships are comparison and ranking, trend, proportion, distribution and correlation.

You may not need a chart at all. If a single number tells the story, use a callout value. If users need precise figures, use a table. Only use a chart when the visual pattern adds meaning the data alone cannot.

Chart examples on this page use Chart.js but the guidance applies regardless of which charting library you use.

For additional chart relationships and examples, refer to the Financial Times Visual Vocabularyopen_in_new.

Comparison and ranking

Trends over time

Proportion

Distribution and correlation

2. Represent the data honestly

Use honest scales, meaningful baselines and clear labels. Let the data speak for itself.

• Use honest baselines and avoid truncating axes without clear indication.
• Keep time intervals and category order consistent.
• Label clearly so users can read values without guessing.

Chart anatomy

Every chart must include the core elements required for clarity and accurate interpretation. The title can optionally include either a subtitle or a callout value.

3. Make the key insight obvious

Remove anything that doesn’t help the reader get to the insight faster. If a chart is trying to say everything, it ends up saying nothing.

• Limit the number of data series.
• Avoid clutter or unnecessary visual elements.
• Use annotations to highlight the key insight.

Dashboards

• Place key metrics first.
• Group related charts.
• Avoid horizontal scrolling for primary information.
• If metadata applies to all charts, include it at the container level.

4. Meet accessibility standards

Charts must meet WCAG 2.2 AA and AAA where possible. Accessibility is the responsibility of the product team, regardless of which tool or library is used.

Contrast

• Text in charts must meet a minimum contrast ratio of 4.5:1 (WCAG 1.4.3).
• Graphical elements such as bars, lines, data points and focus indicators must meet a minimum contrast ratio of 3:1 against adjacent colours and background (WCAG 1.4.11).
• Test contrast in the rendered environment, not just in design files.

Use of colour

Colour must not be the only way to communicate meaning (WCAG 1.4.1).

When differentiating data series:

• Use direct labels where possible.
• Use different marker shapes or stroke styles.
• Avoid relying solely on red/green distinctions.
• Confirm charts remain understandable in greyscale.

Keyboard access

Interactive charts must support full keyboard operation (WCAG 2.1.1).

• All interactive elements are focusable.
• Logical tab order.
• Visible focus indicators.
• Focus is not hidden or obscured (WCAG 2.4.11).
• Interactive targets are at least 24×24px (WCAG 2.5.8).
• Test keyboard interaction manually.

Text alternatives

Every chart must have a text alternative. Users must be able to access the same information without relying on the visual chart. This includes screen reader users, users who have disabled images, and users in low-bandwidth environments.

Summary text

Write a short summary that captures the key insight in plain language. Place it directly above or below the chart.

A summary is not a description of the chart. Do not write ‘the chart shows a line going up.’ Write what the data means.

• Example: Service requests increased steadily from January to May 2025, rising from 220 to 420. A small drop occurred in June.

Data table

A data table gives users access to to the underlying data. The right approach depends on the complexity of the data set.

• For small datasets, provide a full data table using semantic HTML. Keep it visible on the page. Do not hide it behind a toggle or accordion.
• For medium datasets, a summarised table covering the key values is sufficient.
• For large or complex datasets, a written summary plus a link to download the source data is more useful than a large rendered table.

Alt text for images

If a chart is rendered as a static image, it must have descriptive alt text.

• Alt text should convey the key insight, not describe the visual
• For complex charts, use a short alt text and point to the accompanying table or summary
• Example: alt=“Line chart showing monthly service applications for January to June 2025. Data in table below”

Zoom and responsiveness

Charts must remain usable at 200% zoom and 375px viewport width

• Labels do not overlap.
• Primary information remains visible.
• Horizontal scrolling does not hide critical data.

Tool limitations

• Some third-party tools may restrict accessibility customisation.
• If a tool cannot meet WCAG requirements, document the limitation and provide an accessible alternative.
• Accessibility responsibility remains with the product team.

5. Apply NSW visual identity consistently

Apply the NSW brand colour and typography with care. Prioritise contrast and readability. Do not use the palette decoratively.

• Use NSW Brand colour and typography intentionally.

Recommended colour selection method

Respecting established colour conventions

Some data has widely understood colour associations that users rely on to interpret meaning quickly. In these cases, following the established convention takes priority over the standard colour selection method.

A traffic light system is the most common example. Using red for high risk, amber for moderate risk and green for low risk is so broadly understood that departing from it would confuse users, even if those colours are not your primary theme colours.

Other examples include:

• Political representation: established party colours in electoral or parliamentary data
• Environmental indicators: blue for water, green for vegetation in environmental reporting
• Financial conventions: red for negative values, black or green for positive values

When using conventional colours, still meet the 3:1 contrast requirement against white, and support colour with labels, patterns or other markers so the meaning is not lost for users who cannot distinguish the colours.

Do not apply this exception broadly. If there is no established convention that your audience would recognise, use the standard colour selection method.

Background colour

Charts must use a white background (#FFFFFF or --nsw-brand-white) to ensure sufficient contrast for data marks.

NSW Government palette chart-mark options

In a few 02 rows, the line colour uses White or 01 to keep pattern contrast at or above 3:1.

Aboriginal palette chart-mark options

Aboriginal palette options shown here all meet at least 3:1 contrast on white. Where same-family pairings are too low, white pattern lines are used to maintain compliance.

Using a single colour

Not all charts need multiple colours. Some chart types communicate clearly with a single colour and do not require colour differentiation between categories.

A bar chart comparing values across categories is a good example. Each bar represents a separate category, and the position and length of the bar communicates the difference - not the colour. Using a single colour in this case reduces visual noise and keeps the focus on the data.

Use a single colour when:

• Each bar, column or data point represents a separate category that is already labelled.
• There is only one data series.
• Colour differentiation would add no meaning.

Use multiple colours when:

• Multiple data series appear in the same chart space (for example, a grouped bar or multi-line chart).
• A specific segment or value needs to be highlighted.
• Colour is used alongside other cues to distinguish series.

Colour-blind safety

The most common type of colour vision deficiency is red-green confusion. Avoid placing these colour pairs next to each other:

• Green and brown
• Red and brown
• Purple and blue

Line-series differentiation

For line charts, use dash styles, not fill patterns. Dash patterns (solid, dashed, dotted, dash-dot) are the correct redundant channel for distinguishing line series. Fill patterns are for bar, area and pie/doughnut chart marks only.

Using patterns

Colour is usually the primary cue for distinguishing datasets, but charts must remain understandable when users cannot rely on colour alone.

• Use two colours per pattern: a fill and a pattern stroke.
• Keep at least 3:1 contrast between fill and pattern stroke.
• Use colours from the same palette column where possible (for example, Blue 03 fill with Blue 01 pattern).
• Use patterns sparingly to avoid visual noise; keep to 4 to 5 patterns maximum in one chart.
• Avoid thin lines or dense patterns; use stroke widths between 1.5 and 2px.
• Avoid complicated image-based patterns.

Pattern swatch examples

Reference swatches only. Validate final pattern scale at 200% zoom and at mobile widths.

Typography in charts

Text should help users quickly understand the data without competing with visual elements. Use NSW Government primary typeface, Public Sans. If this is not possible, use Arial as fallback.

Minimum text sizes

Avoid text smaller than 12px in digital charts.

Text alignment

• Y-axis labels: right aligned
• X-axis labels: centred
• Dataset labels: placed close to the data they describe
• Direct labelling is preferred over legends where possible.

Axis label orientation

Keep all text horizontal where possible. Angled or vertical text is harder to read and fails more easily at 200% zoom and on mobile viewports.

• Category labels: display horizontally. If labels are too long to fit horizontally, switch to a horizontal bar chart rather than rotating the text.
• Axis titles: keep short enough to sit horizontally above (Y-axis) or beside (X-axis) the axis. Avoid vertical axis titles. Use the chart title and sub-title to carry that context.
• Data labels: always horizontal.

If rotating text cannot be avoided due to tool constraints, limit rotation to 45 degrees and ensure the text still meets the 12px minimum size at all viewport widths.

Number formatting

• Use commas for thousands (for example, 1,000).
• Avoid spaces between digits, as screen readers may read them incorrectly.
• Use consistent decimal precision.

6. Configure tools with good defaults

DDS does not prescribe tools. However, because tool defaults are not automatically compliant, teams must:

• Override default colours and typography to align with DDS.
• Test accessibility within the actual tool environment.
• If a tool cannot meet requirements, provide an alternative.
• Consider accessibility capability when selecting vendors.

Common chart pitfalls

These examples show common issues and better implementations. Use them to spot risks early and improve consistency.

Colour-only differentiation

Tooltip-only values

Too many pie segments

Review checklist

If any answer is no, revise before release.

References

• NSW Brand Toolkit: Charts and graphsopen_in_new (print guidance)
• NSW Design System: Colour, Typography, and Table
• Chart.js documentationopen_in_new (if you use Chart.js)
• Financial Times Visual Vocabularyopen_in_new for extended chart type support.