v0.4.0
Docs npm … Get started

Guides

Theming

Presets theme: 'dark' or 'light', custom ThemeConfig, series palette overrides, and runtime switches via setOption.

What a theme controls

Themes set canvas chrome and default series colors: background, text, axis/grid strokes, and colorPalette. Typography fields (fontFamily, fontSize) apply to axis labels and legend text.

Theme playground

Switch dark/light presets, brand custom themes, and series palettes. Series without explicit color pick up the palette in order; the playground also assigns series.color from the selected palette.

Built-in presets

TypeScript
await ChartGPU.create(container, {
  theme: 'dark', // default
  // theme: 'light',
  palette: ['#D4A520', '#3B7DD8', '#3ECFCF', '#E05A8C', '#6BCB77', '#8B7CFF', '#F0A202', '#7A8494'],
  series: Array.from({ length: 4 }, (_, i) => ({
    type: 'line',
    name: `s${i + 1}`,
    data: points[i],
    color: palette[i % palette.length],
    lineStyle: { width: 2 },
    areaStyle: { opacity: 0.08 },
  })),
});

Custom ThemeConfig (brand)

Pass a full theme object when product chrome needs to match your app shell, not only the stock dark/light pair. The brand playground mode uses this shape plus a top-level palette.

TypeScript
await ChartGPU.create(container, {
  theme: {
    backgroundColor: '#12141a',
    textColor: '#e8e6e3',
    axisLineColor: '#2a2e38',
    axisTickColor: '#2a2e38',
    gridLineColor: '#1e222b',
    colorPalette: ['#D4A520', '#3B7DD8', '#3ECFCF', '#E05A8C', '#6BCB77', '#8B7CFF', '#F0A202', '#7A8494'],
    fontFamily: 'DM Sans, system-ui, sans-serif',
    fontSize: 12,
  },
  palette: ['#D4A520', '#3B7DD8', '#3ECFCF', '#E05A8C', '#6BCB77', '#8B7CFF', '#F0A202', '#7A8494'],
  series: metrics.map((m, i) => ({
    type: 'line',
    name: m.name,
    data: m.points,
    color: palette[i % palette.length],
    lineStyle: { width: 2 },
    areaStyle: { opacity: 0.08 },
  })),
});

Aurora custom theme

Aurora swaps chrome colors and typeface. Series colors still come from the selected palette (brand / neon / earth), applied both on the theme and as a top-level palette.

TypeScript
await ChartGPU.create(container, {
  theme: {
    backgroundColor: '#0b1020',
    textColor: '#dce6ff',
    axisLineColor: '#243056',
    axisTickColor: '#243056',
    gridLineColor: '#182038',
    colorPalette: ['#D4A520', '#3B7DD8', '#3ECFCF', '#E05A8C', '#6BCB77', '#8B7CFF', '#F0A202', '#7A8494'],
    fontFamily: 'Space Grotesk, system-ui, sans-serif',
    fontSize: 12,
  },
  palette: ['#D4A520', '#3B7DD8', '#3ECFCF', '#E05A8C', '#6BCB77', '#8B7CFF', '#F0A202', '#7A8494'],
  series: [/* line series with color from palette */],
});

Palette-only override

palette replaces the theme’s series colors without changing grid/text chrome. Color precedence: series lineStyle.color / areaStyle.color → series.color → theme / palette. Neon example:

TypeScript
await ChartGPU.create(container, {
  theme: 'dark',
  palette: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'],
  series: [/* colors assigned in order */],
});

Switch at runtime

Call setOption with a new theme (preset string or ThemeConfig). Spread current options so series and data stay put:

TypeScript
// Prefer spreading current options so series/data stay intact
chart.setOption({
  ...chart.options,
  theme: 'light',
});

Related