---
title: "JavaScript Chart Colors and Palettes"
description: "Chart colors from built-in palettes (lemonade, classic, category10, material, focus), custom color arrays, per-series overrides, and CSS-variable theming."
source: https://lemonadejs.com/charts/docs/palettes/
---

# Chart colors and palettes

Series colors resolve in a fixed order: an explicit per-series `color`
wins, then a custom `colors` array, then the named `palette`, and finally
the default. Every renderer draws from the same resolved palette, so a
palette change recolors the whole chart consistently.

## Built-in palettes

<!--example-->

```js
import Charts from '@lemonadejs/charts';

const series = [
    { name: 'A', data: [120, 190, 80, 220] },
    { name: 'B', data: [80, 105, 130, 140] },
    { name: 'C', data: [45, 70, 95, 60] },
];

const App = (props, { state }) => {
    const palette = state('lemonade');
    return html`<div>
        <select onchange="${(e) => (palette.value = e.target.value)}">
            <option value="lemonade">lemonade</option>
            <option value="classic">classic</option>
            <option value="category10">category10</option>
            <option value="material">material</option>
            <option value="focus">focus</option>
        </select>
        <${Charts} type="bar" categories="${['Q1', 'Q2', 'Q3', 'Q4']}"
            series="${series}" palette="${palette}" legend />
    </div>`;
};
```

| Palette | Character |
|---|---|
| `lemonade` | The catalog default; mirrors the shared `--lm-series-*` tokens, so charts match the other data blocks (gantt, kanban, schedule) out of the box |
| `classic` | Calm, balanced BI palette; the classic 10-color scheme |
| `category10` | D3's schemeCategory10, the familiar web palette |
| `material` | Material Design 500s; bright, high saturation |
| `focus` | Hero blue + a cool-gray ramp; emphasises the first slice/series; best with data sorted descending |

## Custom colors

A `colors` array overrides whichever palette is selected; a per-series
`color` overrides both:

```js
html`<${Charts} type="bar" series="${series}"
    colors="${['#0ea5e9', '#f59e0b', '#10b981']}" />`

const medals = [
    { name: 'Gold', color: '#e8c132', data: [130, 92, 88] },
    { name: 'Silver', color: '#b6b8bd', data: [110, 96, 75] },
    { name: 'Bronze', color: '#b1762b', data: [95, 81, 70] },
];
```

Colors cycle when there are more series than palette entries.

## Where the palette reaches

The resolved palette drives more than bars and slices: heatmap cells
interpolate toward the series color, boxplot fills tint from it, treemap
depths lighten from the root color, and pie label text flips dark/white
based on slice luminance. Pick one palette and the whole chart family
stays coherent.

## CSS theming

Everything is DOM (no canvas), so the stylesheet is the theming API. All
classes follow the `lm-chart-*` convention (`.lm-chart-bar`,
`.lm-chart-slice`, `.lm-chart-legend`, ...), and visual variants are
`data-*` attributes on the root. Override freely; there is no styling
engine to fight:

```css
.my-dashboard .lm-chart-bar { border-radius: 4px 4px 0 0; }
.my-dashboard .lm-chart-gridline { opacity: .5; }
```

The `lemonade` palette is kept in sync (by value) with the
`--lm-series-*` CSS variables of the shared components stylesheet, so
charts sit naturally next to every other LemonadeJS block.