> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Series colors

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:

```tsx theme={null}
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`:

```tsx theme={null}
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:

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