Chart Colors

Theme namespace: theme.charts

You can control chart colors globally via the theme in two ways:

As a simple array of colors.
As an object that maps specific values to colors.

It’s common to use both - explicitly mapping important or frequently used values, and falling back to a branded color array for everything else.

1. Provide colors as a simple array

// embeddable.theme.ts
 
backgroundColors?: string[]; // used for fills: bars, areas, pie/donut segments, etc.
borderColors?: string[]; // used for strokes: bar/area outlines, line strokes, segment borders
 
const myTheme = {
  charts: {
    backgroundColors: ["#d2ecfd", "#a3d4fa", "#6bb7f5"],
    borderColors: ["#86bdf2", "#5aa1ef", "#2e82ea"] // slightly darker for definition
  }
}

Things to notice

You can pass any length arrays; we’ll cycle if there are more categories than colors.
Values can be hex, rgb(a), or hsl(a).
If backgroundColors and borderColors are identical, borders will effectively disappear (this can be desirable for minimalist styles).

Automatic color assignment

For charts where multiple categories/series are shown (e.g. pie/donut, grouped/stacked bars, multi-line), colors are assigned to dimension values deterministically. This means the same category label gets the same color across components (e.g. United States → always blue), improving cross-chart scanability.
For charts that, by convention, use a single color (to emphasise shape, not category), colors are assigned to measures.This means the same measure gets the same color across components (e.g. Total USD → always green). Typical single-color cases:
- Bar (one measure, one dimension)
- Line (single series)
- Area (single series)

Cycling & overflow

If your data has more unique values than colors in the array, we cycle through the palette in order.
Best practice: provide enough colors to cover your expected maximum legend cardinality for a dashboard.

2. Manually assign colors to values

You can manually control chart colors by passing a backgroundColorMap via your theme.

// embeddable.theme.ts
 
const myTheme = {
    charts: {
        backgroundColors: ["#d2ecfd", "#a3d4fa", "#6bb7f5"],
        backgroundColorMap: {
            dimensionValue: {
                'customers.country.United States': '#2563EB',  // blue-600
                'customers.country.Australia': '#16A34A',      // green-600
                'customers.country.Canada': '#DC2626',         // red-600
                'customers.country.United Kingdom': '#4F46E5', // indigo-600
                'customers.country.Belgium': '#F59E0B',        // amber-500
            },
            measure: {
                'customers.count': '#ffe292', // yellow
            },
        },
    }
};

Things to notice

Values can be hex, rgb(a), or hsl(a).
dimensionValue keys use the shape: {model name}.{dimension name}.{value}
measure keys are just the measure name.
You can provide a simple array of background colors and a background color map.

How it works

For multi-category charts (pie/donut, grouped or stacked bars, multi-line), colors are assigned to dimension values.
For single-color charts (like simple bar charts) colors are assigned to measures.
Importantly, colors selected in the no-code builder take priority over the color map.

Practical tips

Dark/light themes: Create separate theme objects (e.g. lightTheme, darkTheme) and swap them via client-context. Keep the order of colors identical across themes so value→color mapping stays consistent.
Colors per customer / tenant: You can inject colors per user via client-context and merge them. If your theme expects separate fill/stroke arrays, map them explicitly:

<em-beddable
    token="${json.token}"
    client-context='${JSON.stringify({
        colors: ["#555d8e", "#566f94", "#56819b"]
    })}'
></em-beddable>

// embeddable.theme.ts
 
export const themeProvider = (clientContext: any, parentTheme: Theme): Theme => {
    const colors: string[] | undefined = clientContext?.colors;
 
    const overrides = colors
        ? { 
            charts: {
                backgroundColors: colors,     
            }
        } : {};
 
    return defineTheme(parentTheme, overrides) as Theme;
};

Theming Introduction