---
title: "Colours"
framework: react
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

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  LegendModule,
  ModuleRegistry,
  PieSeriesModule,
} from "ag-charts-community";

ModuleRegistry.registerModules([PieSeriesModule, LegendModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<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",
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Colour Formats](https://www.ag-grid.com/charts/reactFunctionalTs/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

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";
import "./styles.css";

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<string, string>) {
  for (const [name, value] of Object.entries(palette)) {
    document.documentElement.style.setProperty(name, value);
  }
}
let dark = false;
ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  NumberAxisModule,
  LegendModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<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" },
    },
  });

  const togglePalette = () => {
    dark = !dark;
    applyPalette(dark ? dusk : dawn);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={togglePalette}>Toggle palette</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: CSS Variables](https://www.ag-grid.com/charts/reactFunctionalTs/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/react/themes/#parameters) instead of a literal value, keeping related colours in sync.

#### Theme Parameter References

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";

let accentColor = "#2f6df0";
let backgroundColor = "#ffffff";
let mix = 0.85;
ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  NumberAxisModule,
  LegendModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<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" },
    },
  });

  const updateTheme = () => {
    const nextOptions = clone(options);

    nextOptions.theme = {
      params: {
        accentColor,
        backgroundColor,
        foregroundColor: { ref: "accentColor", mix, onto: "backgroundColor" },
        axisLineColor: { ref: "accentColor", mix: 0.5 },
      },
    };

    setOptions(nextOptions);
  };

  const changeAccent = (event: Event) => {
    accentColor = (event.target as HTMLSelectElement).value;
    updateTheme();
  };

  const changeBackground = (event: Event) => {
    backgroundColor = (event.target as HTMLSelectElement).value;
    updateTheme();
  };

  const changeMix = (event: Event) => {
    mix = Number((event.target as HTMLInputElement).value);
    document.getElementById("mix-value")!.textContent = mix.toFixed(2);
    updateTheme();
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <div className="gap-right">
            <label htmlFor="accent-select">accentColor:</label>
            <select
              id="accent-select"
              onChange={(event) => changeAccent(event)}
            >
              <option value="#2f6df0">Blue</option>
              <option value="#d1495b">Red</option>
              <option value="#21b372">Green</option>
              <option value="#8a4fff">Purple</option>
            </select>
          </div>
          <div className="gap-right">
            <label htmlFor="bg-select">backgroundColor:</label>
            <select
              id="bg-select"
              onChange={(event) => changeBackground(event)}
            >
              <option value="#ffffff">White</option>
              <option value="#10131a">Midnight</option>
              <option value="#fff1e5">Paper</option>
            </select>
          </div>
          <div>
            <label htmlFor="mix-range">
              mix: <span id="mix-value">0.85</span>
            </label>
            <input
              id="mix-range"
              type="range"
              min="0"
              max="1"
              step="0.05"
              defaultValue="0.85"
              onInput={(event) => changeMix(event)}
            />
          </div>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Theme Parameter References](https://www.ag-grid.com/charts/reactFunctionalTs/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/react/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/react/fills/) for the full reference.