Theme and colors

The default theme: 'auto' follows the page: an ancestor's data-theme="dark|light", then <html class="dark">, then the OS setting, and redraws when they change. Try the theme button at the top of this site.

chart.setTheme('dark');   // 'light' | 'dark' | 'auto'

Palettes

The default palette has eight colors checked so that neighbours stay distinct for color-blind readers (blue, orange, teal, yellow, pink, green, purple, red). From the ninth series on it uses grays instead of repeating a hue, so one color never means two things.

createChart('#chart', {
  type: 'bar',
  title: 'Sales by category',
  palette: 'mono',
  colors: ['#6250d6'],
  stacked: true,
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    series: [
      { name: 'Clothing', data: [42, 48, 51, 63] },
      { name: 'Accessories', data: [28, 31, 30, 38] },
      { name: 'Food', data: [18, 22, 25, 24] },
    ],
  },
});

Series colors

colors: ['#3182f6', '#eb6834'] pins colors in series order; a series' own color changes just that one. Colors belong to series, not ranks, so "Sales" keeps its color when the data changes.

CSS variables

Set --c82-* variables on the chart or any ancestor to match your site. Colors are resolved into the SVG attributes, so exported PNG and SVG files look the same as the screen.

/* light theme */
.my-dashboard {
  --c82-bg: #fffdf8;
  --c82-ink: #1c1917;
  --c82-grid: #ece7df;
  --c82-s1: #e8590c;      /* first series */
  --c82-font: 'Inter', sans-serif;
}
/* only in the dark theme */
.my-dashboard .c82[data-theme='dark'] {
  --c82-bg: #1c1917;
  --c82-ink: #f5f5f4;
  --c82-grid: #2e2a27;
}