Palettes & colors

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

live

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:

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:

.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.