---
title: "Colours"
framework: vue
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 { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  LegendModule,
  ModuleRegistry,
  PieSeriesModule,
} from "ag-charts-community";

ModuleRegistry.registerModules([PieSeriesModule, LegendModule]);

const ChartExample = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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 {
      options,
    };
  },
});

createApp(ChartExample).mount("#app");
```

[Live example: Colour Formats](https://www.ag-grid.com/charts/vue3/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 { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";

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) {
  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 = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <button v-on:click="togglePalette()">Toggle palette</button>
      </div>
    </div>
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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 {
      options,
      togglePalette,
    };
  },
});

createApp(ChartExample).mount("#app");
```

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

#### Theme Parameter References

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  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 = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <div class="gap-right">
          <label for="accent-select">accentColor:</label>
          <select id="accent-select" v-on:change="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 class="gap-right">
          <label for="bg-select">backgroundColor:</label>
          <select id="bg-select" v-on:change="changeBackground($event)">
            <option value="#ffffff">White</option>
            <option value="#10131a">Midnight</option>
            <option value="#fff1e5">Paper</option>
          </select>
        </div>
        <div>
          <label for="mix-range">mix: <span id="mix-value">0.85</span></label>
          <input id="mix-range" type="range" min="0" max="1" step="0.05" value="0.85" v-on:input="changeMix($event)">
          </div>
        </div>
      </div>
      <ag-charts
        :options="options"
      />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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 optionsCopy = clone(options.value);

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

      options.value = optionsCopy;
    };
    const changeAccent = (event) => {
      accentColor = event.target.value;
      updateTheme();
    };
    const changeBackground = (event) => {
      backgroundColor = event.target.value;
      updateTheme();
    };
    const changeMix = (event) => {
      mix = Number(event.target.value);
      document.getElementById("mix-value").textContent = mix.toFixed(2);
      updateTheme();
    };

    return {
      options,
      changeAccent,
      changeBackground,
      changeMix,
    };
  },
});

createApp(ChartExample).mount("#app");
```

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