Chart Colors
Categorical, semantic, sequential and map palettes: CSS variables switch with the theme, ChartPalette provides literals.
API Reference
ChartPalette
| Method | Returns | Description |
|---|---|---|
categorical(index, isDarkMode?) | string | Categorical color at index (wraps modulo 6). |
categoricalVar(index) | string | Same slot as a theme-following var(--tx-chart-categorical-N, #hex) reference. |
semantic(name, isDarkMode?) | string | Semantic color; name is one of the six names. |
sequential('blues', isDarkMode?) | string[] | Five sequential steps (a fresh array each call). |
text('primary' | 'secondary', isDarkMode?) | string | Axis/label text colors. |
mapColors(isDarkMode?) | MapColors | { area, bubble, scale[] } for maps. |
CSS Variables
| Variable | Description |
|---|---|
--tx-chart-categorical-1..6 | Categorical palette. |
--tx-chart-semantic-attention/-warning/-success/-neutral/-disabled/-skeleton | Semantic colors. |
--tx-chart-sequential-blues-1..5 | Sequential ramp. |
--tx-chart-text-primary/-secondary | Text colors. |
--tx-chart-grid-line | Grid lines (primary text at 20% opacity). |
--tx-chart-map-area / --tx-chart-map-scale-1..5 | Map land fill and shading ramp. |
Every variable ships a light-mode fallback, so charts render correctly without the host theme; hosts rebrand by overriding variables with zero component changes.
Two Tracks
Chart components read only the --tx-chart-* CSS variables, which flip automatically under .dark or [data-theme='dark'] — hence no isDarkMode prop. ChartPalette serves the out-of-chart cases (matching series colors in surrounding UI, image export, canvas) with hex literals; its functions are name-compatible with kumo and take an isDarkMode flag, and categoricalVar() is an extra in the charts entry that returns the theme-variable var() reference.
Palette overview
Categorical / Semantic / Sequential
Toggle the site theme to watch the variables flip.
The Three Palettes
- Categorical: 6 colors cycled by series position (modulo 6) —
#4290F0blue,#F5B647yellow,#E8649Dpink,#8D58EEpurple,#50C3B6teal,#D37536orange; slot 1 blue anchors the whole family (it is the middle step of both the sequential and the map ramp). Only yellow changes in dark mode, to#EEB720; the other five match light mode exactly. - Semantic:
Attention/Warning/Success/Neutral/Disabled/Skeleton— status, not series identity; Neutral / Disabled / Skeleton change in dark mode. - Sequential:
blues, five steps low → high; dark mode reverses direction with a dark-tuned step 4 (not a plain mirror).
Maps carry their own --tx-chart-map-* set (land fill + five-step shading ramp) — see Maps.