Dataviz

Dataviz CSS custom properties are available when you load @qtm/css.

@import '@qtm/css';

Quantum does not provide a dedicated Dataviz or chart component to implement Data Visualization Figma guidelines.

However, Quantum provides a Dataviz token set that you can use with your preferred charting or data visualization solution.

Depending on your use case, Dataviz colors can be consumed through:

• CSS custom properties provided by Quantum styles
• JavaScript token exports from @qtm/tokens, which can be more convenient for chart libraries. If you're using Apache ECharts, you can directly use our dedicated theme

How Dataviz tokens are organized

Dataviz styles are grouped in two ways:

By role

There are 5 roles. Each role describes what the color is used for in a chart:

• Extended: a broader set of colors for larger data series sets and strong distinction between series
• Brand: colors based on Quantum blue, intended for high visual impact and low-complexity data visualizations
• Functional: colors based on Quantum red and green, intended to highlight positive and negative data points, trends, and related states
• Structural: colors used for chart anatomy such as axis, area, and pointer elements
• Muted: subdued colors used for reduced emphasis, backgrounds, or borders

By mode

Each palette is also provided in Light and Dark modes.

This means the same Dataviz variable name resolves to the appropriate value for the active mode when the relevant Quantum stylesheet is loaded.

Reading Dataviz CSS variable names

The CSS custom properties use real --dataviz-* names.

A variable name usually tells you:

• the group: extended, brand, functional, muted, or structural
• the kind of usage: bg, border, stroke, or text
• sometimes a variant or intensity such as primary or secondary
• sometimes an indexed series number such as data-1, data-2, etc.

For example:

• --dataviz-role-extended-bg-primary-data-1
• --dataviz-role-brand-stroke-brand-1
• --dataviz-role-functional-bg-positive-positive-primary
• --dataviz-structural-axis-axis-primary

Extended palette (preview)

For most charts, the best starting point is the extended primary background series. These are a good default choice when you need a multi-series palette for chart data.

Usage

CSS custom property

Preview

Series 1--dataviz-role-extended-bg-primary-data-1

Series 2--dataviz-role-extended-bg-primary-data-2

Series 3--dataviz-role-extended-bg-primary-data-3

Series 4--dataviz-role-extended-bg-primary-data-4

Series 5--dataviz-role-extended-bg-primary-data-5

Series 6--dataviz-role-extended-bg-primary-data-6

Series 7--dataviz-role-extended-bg-primary-data-7

Series 8--dataviz-role-extended-bg-primary-data-8

Brand palette (preview)

The Brand role is based on Quantum blue and intended for high visual impact and lower-complexity visualizations.

Usage

CSS custom property

Preview

Brand 1--dataviz-role-brand-bg-primary-brand-1

Brand 2--dataviz-role-brand-bg-primary-brand-2

Brand 3--dataviz-role-brand-bg-primary-brand-3

Brand 4--dataviz-role-brand-bg-primary-brand-4

Functional palette (preview)

The Functional role is used to highlight positive and negative datapoints, trends, and similar states.

Usage

CSS custom property

Preview

Positive--dataviz-role-functional-bg-positive-positive-primary

Moderate--dataviz-role-functional-bg-moderate-moderate-primary

Negative--dataviz-role-functional-bg-negative-negative-primary

Other Dataviz variables available

In addition to the examples above, Quantum styles provide many other Dataviz custom properties.

Category

Examples

When to look at this group

Extended

--dataviz-role-extended-bg-primary-data-1, --dataviz-role-extended-bg-secondary-data-1, --dataviz-role-extended-border-primary-data-1, --dataviz-role-extended-stroke-data-1, --dataviz-role-extended-text-primary-data-1

Use this group when you need colors for chart series, including fills, borders, strokes, and text-related variants

Brand

--dataviz-role-brand-bg-primary-brand-1, --dataviz-role-brand-border-primary-brand-1, --dataviz-role-brand-stroke-brand-1, --dataviz-role-brand-text-primary-brand-1

Use this group when you want a chart palette aligned with the Quantum brand role described in Figma

Functional

--dataviz-role-functional-bg-positive-positive-primary, --dataviz-role-functional-bg-moderate-moderate-primary, --dataviz-role-functional-bg-negative-negative-primary

Use this group for positive, moderate, and negative chart semantics described by the Functional role

Muted

--dataviz-role-muted-bg-muted, --dataviz-role-muted-border-muted

Use this group when chart elements should have less emphasis than primary data colors

Structural

--dataviz-structural-area-bg-area, --dataviz-structural-axis-axis-primary, --dataviz-structural-axis-axis-secondary, --dataviz-structural-pointer-pointer

Use this group for chart anatomy such as areas, axes, and pointer-related elements

In practice, Dataviz is not a single palette. It is a set of variables covering data series colors and chart structure.

Using CSS custom properties

Make sure the relevant Quantum stylesheet is loaded in your application so the Dataviz custom properties are available.

This approach is a good fit for:

• custom CSS
• SVG styling
• libraries or chart configuration code that can resolve CSS variables

.chart-series-a {
  color: var(--dataviz-role-extended-text-data-1);
}

.chart-bar-a {
  background-color: var(--dataviz-role-extended-bg-primary-data-1);
}

Using @qtm/tokens in JavaScript

For some chart libraries, using JavaScript values directly is more convenient than resolving CSS custom properties at runtime.

This is especially true for libraries such as Apache ECharts, where you typically pass color values directly in the chart configuration.

In that case, you can use the token exports provided by @qtm/tokens, which also give access to values in formats other than CSS custom properties.

Quantum Apache ECharts theme

If you are using Apache ECharts, Quantum also provides a dedicated theme:

• https://gitlab.thalesdigital.io/thales-design-system/theming/quantum-apache-echarts-theme

Consider using this theme as a starting point for charts that should align with Quantum visual styling.

Important note about utilities

Raw Dataviz colors and Dataviz semantic tokens are intentionally not exposed through Quantum utility classes or the Tailwind preset.

This means there are no dedicated Dataviz classes such as bg-*, text-*, or border-* generated for these colors.