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

​
Custom palettes

Register palettes with GraphProvider and reference them by ID: 
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:
KeyDescription
waterfallStartStarting value bar
waterfallPositivePositive change bars
waterfallNegativeNegative change bars
waterfallTotalFinal 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' },
  },
}