--- title: "Colours" framework: javascript version: "14.1.0" --- # Colours AG Charts accepts standard CSS colour strings, CSS variables, and theme parameter references anywhere a colour is set. Richer gradient, pattern and image fills are available on `fill` properties. ## Colour Formats Any colour string accepted by CSS can be used wherever a colour is set, including series fills, strokes, text colours, and theme parameters. #### Colour Formats ```ts import { AgChartOptions, AgCharts, LegendModule, ModuleRegistry, PieSeriesModule, } from "ag-charts-community"; ModuleRegistry.registerModules([PieSeriesModule, LegendModule]); const options: AgChartOptions = { title: { text: "Colour Formats", }, data: [ { format: "#4878d0", value: 30 }, { format: "rgb(238, 133, 75)", value: 25 }, { format: "hsl(145, 63%, 42%)", value: 25 }, { format: "mediumpurple", value: 20 }, ], series: [ { type: "pie", angleKey: "value", legendItemKey: "format", // Each slice is filled with the colour named by its legend label. fills: [ "#4878d0", // hex "rgb(238, 133, 75)", // rgb "hsl(145, 63%, 42%)", // hsl "mediumpurple", // named colour ], strokeWidth: 0, }, ], legend: { position: "right", }, }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Colour Formats](https://www.ag-grid.com/charts/typescript/colours/examples/colour-formats) | Format | Example | | --- | --- | | Hex | `'#4878d0'`, `'#48d'`, `'#4878d0cc'` (with alpha) | | rgb / rgba | `'rgb(72, 120, 208)'`, `'rgba(72, 120, 208, 0.8)'` | | hsl / hsla | `'hsl(145, 63%, 42%)'`, `'hsl(145 63% 42% / 0.8)'` | | Named colour | `'mediumpurple'` (any [CSS named colour](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color)) | ## CSS Variables CSS variables can be used anywhere a colour is accepted. These are referenced as `var(--brand-primary)`. #### CSS Variables ```ts import { AgCartesianChartOptions, AgCharts, BarSeriesModule, CategoryAxisModule, LegendModule, ModuleRegistry, NumberAxisModule, } from "ag-charts-community"; const dawn = { "--demo-bg": "#fffdf7", "--demo-fg": "#3a2e2e", "--demo-online": "#e07a5f", "--demo-retail": "#3d405b", }; const dusk = { "--demo-bg": "#161b22", "--demo-fg": "#e6edf3", "--demo-online": "#58a6ff", "--demo-retail": "#ff7b72", }; function applyPalette(palette: Record) { for (const [name, value] of Object.entries(palette)) { document.documentElement.style.setProperty(name, value); } } let dark = false; ModuleRegistry.registerModules([ BarSeriesModule, CategoryAxisModule, NumberAxisModule, LegendModule, ]); const options: AgCartesianChartOptions = { theme: { params: { backgroundColor: "var(--demo-bg)", foregroundColor: "var(--demo-fg)", }, }, title: { text: "Monthly Revenue", }, data: [ { month: "Jan", online: 120, retail: 90 }, { month: "Feb", online: 150, retail: 100 }, { month: "Mar", online: 180, retail: 130 }, { month: "Apr", online: 140, retail: 120 }, { month: "May", online: 210, retail: 160 }, { month: "Jun", online: 190, retail: 150 }, ], series: [ { type: "bar", xKey: "month", yKey: "online", yName: "Online", fill: "var(--demo-online)", }, { type: "bar", xKey: "month", yKey: "retail", yName: "Retail", fill: "var(--demo-retail)", }, ], axes: { x: { type: "category", position: "bottom" }, y: { type: "number", position: "left" }, }, }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); function togglePalette() { dark = !dark; applyPalette(dark ? dusk : dawn); } if (typeof window !== "undefined") { // Attach external event handlers to window so they can be called from index.html (window).togglePalette = togglePalette; } ``` [Live example: CSS Variables](https://www.ag-grid.com/charts/typescript/colours/examples/css-variables) ```js { theme: { params: { backgroundColor: 'var(--demo-bg)', foregroundColor: 'var(--demo-fg)', }, }, series: [ { type: 'bar', xKey: 'month', yKey: 'online', fill: 'var(--demo-online)' }, { type: 'bar', xKey: 'month', yKey: 'retail', fill: 'var(--demo-retail)' }, ], } ``` In the above example: - Click the button to change the CSS variables only and the series, background, axes and text all update. - The chart re-renders automatically whenever a variable changes. There is no need to call `chart.update()`. > **Note** > > The `--ag-charts-*` namespace is reserved for internal use. ## Theme Parameter References A colour can reference a [theme parameter](https://www.ag-grid.com/charts/javascript/themes/#parameters) instead of a literal value, keeping related colours in sync. #### Theme Parameter References ```ts import { AgCartesianChartOptions, AgCharts, BarSeriesModule, CategoryAxisModule, LegendModule, ModuleRegistry, NumberAxisModule, } from "ag-charts-community"; let accentColor = "#2f6df0"; let backgroundColor = "#ffffff"; let mix = 0.85; ModuleRegistry.registerModules([ BarSeriesModule, CategoryAxisModule, NumberAxisModule, LegendModule, ]); const options: AgCartesianChartOptions = { theme: { params: { accentColor, backgroundColor, // Text and axes are derived from the accent and background colours. foregroundColor: { ref: "accentColor", mix, onto: "backgroundColor" }, axisLineColor: { ref: "accentColor", mix: 0.5 }, }, }, title: { text: "Monthly Revenue", }, data: [ { month: "Jan", revenue: 120 }, { month: "Feb", revenue: 150 }, { month: "Mar", revenue: 180 }, { month: "Apr", revenue: 140 }, { month: "May", revenue: 210 }, { month: "Jun", revenue: 190 }, ], series: [ { type: "bar", xKey: "month", yKey: "revenue", yName: "Revenue", // A reference resolves on a series fill as well as on theme parameters. fill: { ref: "accentColor" }, }, ], axes: { x: { type: "category", position: "bottom" }, y: { type: "number", position: "left" }, }, }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); function updateTheme() { options.theme = { params: { accentColor, backgroundColor, foregroundColor: { ref: "accentColor", mix, onto: "backgroundColor" }, axisLineColor: { ref: "accentColor", mix: 0.5 }, }, }; chart.update(options); } function changeAccent(event: Event) { accentColor = (event.target as HTMLSelectElement).value; updateTheme(); } function changeBackground(event: Event) { backgroundColor = (event.target as HTMLSelectElement).value; updateTheme(); } function changeMix(event: Event) { mix = Number((event.target as HTMLInputElement).value); document.getElementById("mix-value")!.textContent = mix.toFixed(2); updateTheme(); } if (typeof window !== "undefined") { // Attach external event handlers to window so they can be called from index.html (window).changeAccent = changeAccent; (window).changeBackground = changeBackground; (window).changeMix = changeMix; } ``` [Live example: Theme Parameter References](https://www.ag-grid.com/charts/typescript/colours/examples/colour-references) ```js { theme: { params: { accentColor: '#2f6df0', backgroundColor: '#ffffff', foregroundColor: { ref: 'accentColor', mix: 0.85, onto: 'backgroundColor' }, axisLineColor: { ref: 'accentColor', mix: 0.5 }, }, }, series: [{ type: 'bar', xKey: 'month', yKey: 'revenue', fill: { ref: 'accentColor' } }], } ``` The reference forms are: - `{ ref: 'accentColor' }` - resolve to another theme parameter. - `{ ref: 'accentColor', mix: 0.5 }` - the referenced parameter at `mix` opacity (`0` fully transparent, `1` fully opaque). - `{ ref: 'accentColor', mix: 0.85, onto: 'backgroundColor' }` - blend one parameter onto another. - `{ ref: 'accentColor', mix: 0.85, ontoColor: '#ff5733' }` - blend a parameter onto a literal colour. - `{ ref: 'accentColor', mix: 0.85, ontoColor: 'var(--brand)' }` - blend a parameter onto a CSS variable. > **Note** > > A reference can be used anywhere a colour is accepted. `ref` and `onto` point to theme parameters; `ontoColor` instead takes a literal colour or a CSS variable, and is mutually exclusive with `onto`. See [Themes](https://www.ag-grid.com/charts/javascript/themes/#colour-references) for more details. ## Gradient, Pattern & Image Fills Most `fill` properties also accept gradient, pattern, and image fills. See [Series Fills](https://www.ag-grid.com/charts/javascript/fills/) for the full reference.