Series colors

By default, series are colored using a built-in palette. There are two ways to customize series colors.

Custom palettes

const palettes = [
  {
    id: 'brand',
    name: 'Brand Colors',
    colors: [
      { id: 'blue', hex: '#1e40af' },
      { id: 'green', hex: '#059669' },
      { id: 'amber', hex: '#d97706' },
    ],
  },
];

<GraphProvider customPalettes={palettes}>
  <Graph
    config={{
      appearance: { paletteId: 'brand' },
    }}
  />
</GraphProvider>;

Palettes appear in the Editor’s color picker, allowing users to switch between them. If a chart has more series than palette colors, colors cycle from the beginning.

Series style overrides

Override individual series via appearance.seriesStyles using keys series1 through series20:

appearance: {
  seriesStyles: {
    series1: { paletteColorId: 'blue' },     // Reference a palette color
    series2: { customColor: '#ef4444' },     // Or use a custom hex color
    series3: {
      customColor: '#10b981',
      fillStyle: 'hatched',                   // 'solid' | 'hatched'
      lineStyle: 'dashed',                    // 'solid' | 'dashed' | 'dotted'
    },
  },
}

You can combine both approaches: use a palette as the base and override specific series.

Waterfall chart colors

Waterfall charts have special series keys for their four bar types:

Key	Description
`waterfallStart`	Starting value bar
`waterfallPositive`	Positive change bars
`waterfallNegative`	Negative change bars
`waterfallTotal`	Final total bar

When using a custom palette without overrides, colors are assigned in order: 1st color → start, 2nd → positive, 3rd → negative, 4th → total. To customize waterfall colors explicitly:

appearance: {
  seriesStyles: {
    waterfallStart: { customColor: '#6b7280' },
    waterfallPositive: { customColor: '#10b981' },
    waterfallNegative: { customColor: '#ef4444' },
    waterfallTotal: { customColor: '#3b82f6' },
  },
}

Get Started

Graph types

Customisation

Configuration

Editor

Advanced

Reference

Custom palettes

Series style overrides

Waterfall chart colors

​Custom palettes

​Series style overrides

​Waterfall chart colors

Custom palettes

Series style overrides

Waterfall chart colors