vue-charts Theming and dark mode
Every default color in vccs comes from a CSS variable with a fallback. Set the variables on any parent element, and charts follow your theme, including dark mode, without overriding SVG attributes.
.dashboard {
--v-charts-grid: #e4e4e7;
--v-charts-text: #71717a;
}
.dark .dashboard {
--v-charts-grid: #27272a;
--v-charts-text: #a1a1aa;
}
Series colors
A series without its own color takes the next palette color. Map the palette to your design system once, for example to the shadcn-vue chart colors:
:root {
--v-charts-series-1: var(--chart-1);
--v-charts-series-2: var(--chart-2);
--v-charts-series-3: var(--chart-3);
}
How the palette is assigned:
- Series charts (Area, Bar, Line, Scatter, Radar) count series in the order they register. A series with an explicit color still takes its place in the count.
- Pie, Funnel and RadialBar count entries. Treemap counts top-level groups; Sunburst children inherit the color of their top-level branch.
- After eight colors the palette repeats. Set
--v-charts-seriesalone to give every series the same color.
Explicit color props accept variables too:
<Bar data-key="desktop" fill="var(--chart-1)" />
Tokens
| Token | Used for | Fallback |
|---|---|---|
--v-charts-grid | grid lines, polar grid, reference lines and areas | #ccc |
--v-charts-axis | axis lines, tick lines, brush and error-bar strokes | #666 |
--v-charts-text | tick labels and text | #666 (ticks), #808080 (Text) |
--v-charts-cursor | tooltip cursor line and band | #ccc |
--v-charts-muted | bar and radial bar backgrounds; empty Tracker, calendar, Heatmap and CohortChart cells | #eee (backgrounds), #e5e5e5 (Tracker), #ebedf0 (calendar), #eef2f7 (Heatmap, CohortChart) |
--v-charts-background | dot fills and separators between sectors and nodes | #fff |
--v-charts-series | fallback for every numbered series token | #2563eb for series 1 |
--v-charts-series-1 | palette color 1 | #2563eb |
--v-charts-series-2 | palette color 2 | #f97316 |
--v-charts-series-3 | palette color 3 | #14b8a6 |
--v-charts-series-4 | palette color 4 | #a855f7 |
--v-charts-series-5 | palette color 5 | #f59e0b |
--v-charts-series-6 | palette color 6 | #ec4899 |
--v-charts-series-7 | palette color 7 | #06b6d4 |
--v-charts-series-8 | palette color 8 | #84cc16 |
--v-charts-status-up, -degraded, -down, -maintenance | Tracker status colors | #22c55e, #f59e0b, #ef4444, #3b82f6 |
--v-charts-inactive | hidden legend items | #a3a3a3 |
--v-charts-focus | keyboard focus outline | Highlight |
--v-charts-tooltip-background | default tooltip background | #fff |
--v-charts-tooltip-border | default tooltip border | #ccc |
--v-charts-label-foreground | text on filled cells and Treemap nodes | automatic black/white for known opaque fills; otherwise currentColor |
--v-charts-tooltip-foreground | default tooltip text | #000 |
Numbered tokens resolve as var(--v-charts-series-N, var(--v-charts-series, palette-color)).
Single-color charts use series 1. chartThemeTokens exports the token names.
Class names
Every rendered part has a stable class with the v-charts- prefix, for example .v-charts-bar-rectangle, .v-charts-cartesian-axis-tick-value or .v-charts-tooltip-wrapper. Use them for anything the tokens do not cover.
Text on fills
Default Treemap palette labels use a contrasting foreground for the palette color.
When overriding series tokens, set --v-charts-label-foreground against your fill.
Known opaque colors use whichever of #ffffff and #0a0a0a has higher contrast.
For CSS variables, color mixes and translucent fills, set --v-charts-label-foreground
on the chart or a cell's parent. Choose it against the resolved, composited fill in
both themes. A variable's fallback does not establish its actual color.
The override also takes precedence over the automatic choice for opaque fills.
Tooltip text uses --v-charts-tooltip-foreground; series colors appear as swatches.
BarList text inherits your page color, with the bar color limited to an 18% tint.