---
url: /docs/foundations/data-visualization/tokens/chart.md
---
# Chart Colors (dataviz)

Chart colors are used for non-data elements in a chart. For design guidelines, see [Color Guidelines > Chart Colors](/foundations/data-visualization/color/chart-colors/)

::: details Visual overview
![Preview of ChartBackground, ChartLine and ChartText colors in Light and Dark mode](/foundations/dataviz/token-overview-chart.png)
:::

## ChartBackground (dataviz)

Use as background for charts.

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `ChartBackground/Default` |  | `--w-dv-s-color-chartbackground` | `dv-s-chartbg` | `dv-s-fill-chartbg` | `dv-s-stroke-chartbg` |

## ChartLine (dataviz)

Use for baseline and gridlines.

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `ChartLine/Default` |  | `--w-dv-s-color-chartline` | `dv-s-chartline` | `dv-s-fill-chartline` | `dv-s-stroke-chartline` |
| `ChartLine/Subtle` |  | `--w-dv-s-color-chartline-subtle` | `dv-s-chartline-subtle` | `dv-s-fill-chartline-subtle` | `dv-s-stroke-chartline-subtle` |

## ChartText (dataviz)

Use for labels, axes names etc.

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `ChartText/Default` |  | `--w-dv-s-color-charttext-default` | `dv-s-charttext` | `dv-s-fill-charttext` | `dv-s-stroke-charttext` |
| `ChartText/Subtle` |  | `--w-dv-s-color-charttext` | `dv-s-charttext-subtle` | `dv-s-fill-charttext-subtle` | `dv-s-stroke-charttext-subtle` |