---
title: "Themes"
framework: vue
version: "14.1.0"
---

# Themes

Themes allow you to customise the appearance of your charts. They provide defaults for different properties of the chart that will be used unless overridden by the chart options.

## Using Stock Themes

Every chart uses the `'ag-default'` theme unless configured otherwise.

```js
AgCharts.create({
    theme: 'ag-default', // optional, implied
    //...
});
```

> **Note**
>
> [Financial Charts](https://www.ag-grid.com/charts/vue/financial-charts/) use the `ag-financial` and `ag-financial-dark` themes only.

The following themes are provided out-of-the-box:

```ts
type AgChartThemeName =
    | 'ag-default'
    | 'ag-default-dark'
    | 'ag-sheets'
    | 'ag-sheets-dark'
    | 'ag-polychroma'
    | 'ag-polychroma-dark'
    | 'ag-vivid'
    | 'ag-vivid-dark'
    | 'ag-material'
    | 'ag-material-dark';
```

In the example below, you can click the buttons to change the theme used in the chart.

#### Stock Themes

```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";
import { getData } from "./data";
import clone from "clone";

ModuleRegistry.registerModules([LegendModule, PieSeriesModule]);

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <button v-on:click="setThemeDefault()">Default Theme</button>
        <button v-on:click="setThemeSheets()">Sheets Theme</button>
        <button v-on:click="setThemePolychroma()">Polychroma Theme</button>
        <button v-on:click="setThemeVivid()">Vivid Theme</button>
        <button v-on:click="setThemeMaterial()">Material Theme</button>
      </div>
    </div>
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<AgPolarChartOptions>({
      theme: "ag-default",
      title: {
        text: "Chart Theme Example",
      },
      data: getData(),
      series: [
        {
          type: "pie",
          angleKey: "value",
          calloutLabelKey: "label",
        },
      ],
    });

    const setThemeDefault = () => {
      const optionsCopy = clone(options.value);

      optionsCopy.theme = "ag-default";

      options.value = optionsCopy;
    };
    const setThemeSheets = () => {
      const optionsCopy = clone(options.value);

      optionsCopy.theme = "ag-sheets";

      options.value = optionsCopy;
    };
    const setThemePolychroma = () => {
      const optionsCopy = clone(options.value);

      optionsCopy.theme = "ag-polychroma";

      options.value = optionsCopy;
    };
    const setThemeVivid = () => {
      const optionsCopy = clone(options.value);

      optionsCopy.theme = "ag-vivid";

      options.value = optionsCopy;
    };
    const setThemeMaterial = () => {
      const optionsCopy = clone(options.value);

      optionsCopy.theme = "ag-material";

      options.value = optionsCopy;
    };

    return {
      options,
      setThemeDefault,
      setThemeSheets,
      setThemePolychroma,
      setThemeVivid,
      setThemeMaterial,
    };
  },
});

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

[Live example: Stock Themes](https://www.ag-grid.com/charts/vue3/themes/examples/stock-themes)

## Making Custom Themes

You can create your own theme, which builds upon an existing theme and allows you to change as many or as few properties as you like.

A custom theme is an object with the following optional properties:

- `baseTheme` - The name of the theme to base this theme upon (if not specified, the `'ag-default'` theme is used).
- `palette` - The palette to use, replaces the palette of the base theme.
- `params` - The theme parameters to set global styles.
- `overrides` - The object to be merged with the base theme's defaults and override them.

See the [Themes API page](https://www.ag-grid.com/charts/themes-api/) for the complete options structure.

## Palette

A palette is the array of colours used for the data, for example the bars in a bar series chart.

If there are more groups of data than colours in the palette, the colours will be repeated.

#### Palette

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

const paperTheme = {
  palette: {
    fills: ["#006f9b", "#ff7faa", "#00994d", "#ff8833", "#00a0dd"],
    strokes: ["#003f58", "#934962", "#004a25", "#914d1d", "#006288"],
  },
};

const oceanTheme = {
  palette: {
    fills: ["#072B6E", "#094890", "#0B6CA8", "#0C94B6", "#0DC9C9"],
    strokes: ["#051C48", "#073569", "#095686", "#097590", "#0A9999"],
  },
};

const neonTheme = {
  palette: {
    fills: ["#00ff1e", "#ff00dd", "#00fff7", "#8f00ff", "#ff0000"],
    strokes: ["#000"],
  },
};

ModuleRegistry.registerModules([
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <button v-on:click="useDefaultTheme()">Default</button>
        <button v-on:click="usePaperTheme()">Paper</button>
        <button v-on:click="useOceanTheme()">Ocean</button>
        <button v-on:click="useNeonTheme()">Neon</button>
      </div>
    </div>
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<AgCartesianChartOptions>({
      theme: paperTheme,

      data: getData(),
      series: [
        {
          type: "bar",
          xKey: "quarter",
          yKey: "iphone",
          yName: "iPhone",
          strokeWidth: 2,
        },
        {
          type: "bar",
          xKey: "quarter",
          yKey: "mac",
          yName: "Mac",
          strokeWidth: 2,
        },
        {
          type: "bar",
          xKey: "quarter",
          yKey: "ipad",
          yName: "iPad",
          strokeWidth: 2,
        },
        {
          type: "bar",
          xKey: "quarter",
          yKey: "wearables",
          yName: "Wearables",
          strokeWidth: 2,
        },
        {
          type: "bar",
          xKey: "quarter",
          yKey: "services",
          yName: "Services",
          strokeWidth: 2,
        },
      ],
    });

    const useDefaultTheme = () => {
      const optionsCopy = clone(options.value);

      delete optionsCopy.theme;

      options.value = optionsCopy;
    };
    const usePaperTheme = () => {
      const optionsCopy = clone(options.value);

      optionsCopy.theme = paperTheme;

      options.value = optionsCopy;
    };
    const useOceanTheme = () => {
      const optionsCopy = clone(options.value);

      optionsCopy.theme = oceanTheme;

      options.value = optionsCopy;
    };
    const useNeonTheme = () => {
      const optionsCopy = clone(options.value);

      optionsCopy.theme = neonTheme;

      options.value = optionsCopy;
    };

    return {
      options,
      useDefaultTheme,
      usePaperTheme,
      useOceanTheme,
      useNeonTheme,
    };
  },
});

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

[Live example: Palette](https://www.ag-grid.com/charts/vue3/themes/examples/palettes)

```js
const myTheme = {
    palette: {
        fills: ['#006f9b', '#ff7faa', '#00994d', '#ff8833', '#00a0dd'],
        strokes: ['#003f58', '#934962', '#004a25', '#914d1d', '#006288'],
    },
};
```

## Parameters

The `params` object is used to set styles across the whole chart in one place.

- Set the font with `fontFamily` and `fontSize`.
- Use `foregroundColor`, `backgroundColor` and `accentColor` to set the main colours on the chart. All other colours will default to a mix of these three.
- Use specific params to adjust tooltips, menus, panels, toolbars, buttons and text inputs, for example `tooltipBackgroundColor`. Please see the [Themes API reference](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-params) for the full list of available options.

#### Theme Parameters

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrossLinesModule,
  CrosshairModule,
  ErrorBarsModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

const paperTheme = {
  palette: {
    fills: ["#006f9b", "#ff7faa", "#00994d", "#ff8833", "#00a0dd"],
    strokes: ["#003f58", "#934962", "#004a25", "#914d1d", "#006288"],
  },
  overrides: {
    common: {
      subtitle: {
        text: "Paper Theme",
      },
    },
  },
  params: {
    foregroundColor: "#262a33",
    backgroundColor: "#fff1e5",
    accentColor: "#0d7680",
    fontFamily: [{ googleFont: "DM Serif Text" }, "Georgia", "sans-serif"],
    fontSize: 14,
    tooltipBackgroundColor: "#fff7ef",
    tooltipTextColor: "#262a33",
  },
};

const oceanTheme = {
  palette: {
    fills: ["#072b6e", "#0c94b6", "#0b6ca8", "#094890", "#0bc9c9"],
    strokes: ["#051c48", "#073569", "#095686", "#097590", "#0a9999"],
  },
  overrides: {
    common: {
      subtitle: {
        text: "Ocean Theme",
      },
    },
  },
  params: {
    foregroundColor: "#0a54a4",
    backgroundColor: "#d9e0ed",
    accentColor: "#0ba268",
    fontFamily: [{ googleFont: "Pacifico" }, "Savoye LET", "cursive"],
    fontSize: 16,
  },
};

const neonTheme = {
  palette: {
    fills: ["#8f00ff", "#ff00dd", "#00ff1e", "#00fff7", "#ff0000"],
    strokes: ["#fff"],
  },
  overrides: {
    common: {
      subtitle: {
        text: "Neon Theme",
      },
    },
  },
  params: {
    foregroundColor: "#00ff1e",
    backgroundColor: "#000000",
    accentColor: "#ff00dd",
    fontFamily: [{ googleFont: "IBM Plex Mono" }, "monospace"],
    fontSize: 12,
    axisLineColor: "#00ff1e",
    gridLineColor: "#00ff1e",
    tooltipBackgroundColor: "#00ff1e",
    tooltipTextColor: "#000000",
  },
};

const defaultTheme = {
  baseTheme: "ag-default",
  overrides: {
    common: {
      subtitle: {
        text: "Default Theme",
      },
    },
  },
};

ModuleRegistry.registerModules([
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  CrosshairModule,
  CrossLinesModule,
  ErrorBarsModule,
  LegendModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <button v-on:click="useDefaultTheme()">Default</button>
        <button v-on:click="usePaperTheme()">Paper</button>
        <button v-on:click="useOceanTheme()">Ocean</button>
        <button v-on:click="useNeonTheme()">Neon</button>
      </div>
    </div>
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<AgCartesianChartOptions>({
      theme: paperTheme,

      title: {
        text: "Dolphins & Mirrors",
      },
      subtitle: {
        enabled: true,
      },
      loadGoogleFonts: true,
      data: getData(),
      series: [
        {
          type: "bar",
          xKey: "dolphin",
          yKey: "interactionDurationTM",
          yName: "Interaction Duration - Transparent Mirror",
          legendItemName: "Interaction Duration - Transparent Mirror",
          stackGroup: "ID",
          errorBar: {
            yLowerKey: "interactionDurationTMLower",
            yUpperKey: "interactionDurationTMUpper",
          },
        },
        {
          type: "bar",
          xKey: "dolphin",
          yKey: "interactionDurationYM",
          yName: "Interaction Duration - Yellow Mirror",
          legendItemName: "Interaction Duration - Yellow Mirror",
          stackGroup: "ID",
          errorBar: {
            yLowerKey: "interactionDurationYMLower",
            yUpperKey: "interactionDurationYMUpper",
          },
        },
        {
          type: "bar",
          xKey: "dolphin",
          yKey: "numberOfLooksTM",
          yName: "Number of Looks - Transparent Mirror",
          yKeyAxis: "ySecondary",
          legendItemName: "Number of Looks - Transparent Mirror",
          stackGroup: "NOL",
        },
        {
          type: "bar",
          xKey: "dolphin",
          yKey: "numberOfLooksYM",
          yName: "Number of Looks - Yellow Mirror",
          yKeyAxis: "ySecondary",
          legendItemName: "Number of Looks - Yellow Mirror",
          stackGroup: "NOL",
        },
      ],
      axes: {
        x: {
          type: "category",
          position: "top",
          paddingInner: 0.5,
          paddingOuter: 0.2,
          crossLines: [
            {
              type: "range",
              range: ["Peter", "Peter"],
              strokeWidth: 0,
            },
            {
              type: "range",
              range: ["Mercutio", "Mercutio"],
              strokeWidth: 0,
            },
          ],
        },
        y: {
          type: "number",
          position: "left",
          title: {
            text: "Duration of Interaction (seconds)",
          },
        },
        ySecondary: {
          type: "number",
          position: "right",
          title: {
            text: "Number of Looks",
          },
        },
      },
    });

    const useDefaultTheme = () => {
      const optionsCopy = clone(options.value);

      optionsCopy.theme = defaultTheme;

      options.value = optionsCopy;
    };
    const usePaperTheme = () => {
      const optionsCopy = clone(options.value);

      optionsCopy.theme = paperTheme;

      options.value = optionsCopy;
    };
    const useOceanTheme = () => {
      const optionsCopy = clone(options.value);

      optionsCopy.theme = oceanTheme;

      options.value = optionsCopy;
    };
    const useNeonTheme = () => {
      const optionsCopy = clone(options.value);

      optionsCopy.theme = neonTheme;

      options.value = optionsCopy;
    };

    return {
      options,
      useDefaultTheme,
      usePaperTheme,
      useOceanTheme,
      useNeonTheme,
    };
  },
});

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

[Live example: Theme Parameters](https://www.ag-grid.com/charts/vue3/themes/examples/theme-parameters)

```js
const myTheme = {
    palette: {
        fills: ['#006f9b', '#ff7faa', '#00994d', '#ff8833', '#00a0dd'],
        strokes: ['#003f58', '#934962', '#004a25', '#914d1d', '#006288'],
    },
    params: {
        foregroundColor: '#262a33',
        backgroundColor: '#fff1e5',
        accentColor: '#0d7680',
        fontFamily: [{ googleFont: 'DM Serif Text' }, 'Georgia', 'sans-serif'],
        fontSize: 14,
        tooltipBackgroundColor: '#fff7ef',
        tooltipTextColor: '#262a33',
    },
};
```

In the above example:

- The three main colours are defined with some additional specific colours for chrome elements.
- All text elements are set to the same font family.
- All text, except the titles and footer, are set to the same font size.

### Colour References

Any colour parameter can reference another instead of a fixed value, keeping related colours in sync. See [Colours](https://www.ag-grid.com/charts/vue/colours/) for all accepted colour value forms.

#### Colour 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 colorRef = "accentColor";

let onto = "none";

let mix = 0.35;

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  NumberAxisModule,
  LegendModule,
]);

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <div class="gap-right">
          <label for="ref-select">ref:</label>
          <select id="ref-select" v-on:change="changeRef($event)">
            <option value="accentColor">accentColor</option>
            <option value="foregroundColor">foregroundColor</option>
            <option value="backgroundColor">backgroundColor</option>
          </select>
        </div>
        <div class="gap-right">
          <label for="onto-select">onto:</label>
          <select id="onto-select" v-on:change="changeOnto($event)">
            <option value="none">none</option>
            <option value="backgroundColor">backgroundColor</option>
            <option value="foregroundColor">foregroundColor</option>
            <option value="accentColor">accentColor</option>
          </select>
        </div>
        <div>
          <label for="mix-range">mix: <span id="mix-value">0.35</span></label>
          <input id="mix-range" type="range" min="0" max="1" step="0.05" value="0.35" 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: "#2f6df0",
          backgroundColor: "#ffffff",
          foregroundColor: "#1b2a4a",
          // Only the text colour is derived from the controls below.
          textColor: { ref: colorRef, mix },
        },
      },
      title: {
        text: "Quarterly Revenue",
      },
      subtitle: {
        text: "Text colour derived from a parameter reference",
      },
      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",
          fill: "#c9d6e8",
        },
      ],
      axes: {
        x: { type: "category", position: "bottom", title: { text: "Month" } },
        y: {
          type: "number",
          position: "left",
          title: { text: "Revenue ($000s)" },
        },
      },
    });

    const updateTextColor = () => {
      const optionsCopy = clone(options.value);

      const textColor =
        onto === "none" ? { ref: colorRef, mix } : { ref: colorRef, mix, onto };
      optionsCopy.theme = {
        params: {
          accentColor: "#2f6df0",
          backgroundColor: "#ffffff",
          foregroundColor: "#1b2a4a",
          // Only the text colour is derived from the controls below.
          textColor,
        },
      };

      options.value = optionsCopy;
    };
    const changeRef = (event) => {
      colorRef = event.target.value;
      updateTextColor();
    };
    const changeOnto = (event) => {
      onto = event.target.value;
      updateTextColor();
    };
    const changeMix = (event) => {
      mix = Number(event.target.value);
      document.getElementById("mix-value").textContent = mix.toFixed(2);
      updateTextColor();
    };

    return {
      options,
      changeRef,
      changeOnto,
      changeMix,
    };
  },
});

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

[Live example: Colour References](https://www.ag-grid.com/charts/vue3/themes/examples/theme-colour-references)

The chart `textColor` is derived from the controls. With no `onto`, `mix` fades the referenced colour towards transparency.

```js
const myTheme = {
    params: {
        accentColor: '#0d7680',
        subtleTextColor: { ref: 'textColor', mix: 0.6 },
        tooltipBackgroundColor: { ref: 'accentColor', mix: 0.1, onto: 'backgroundColor' },
    },
};
```

- `{ ref: 'accentColor' }` - use another parameter's value.
- `{ ref: 'accentColor', mix: 0.5 }` - that colour at `50%` opacity.
- `{ ref: 'accentColor', mix: 0.1, onto: 'backgroundColor' }` - blend `ref` onto `onto`, weighted by `mix`.
- `{ ref: 'accentColor', mix: 0.1, ontoColor: 'var(--brand)' }` - blend `ref` onto a literal colour or CSS variable, weighted by `mix`.

### Borders

Border parameters use a consistent `{ width, color }` shape across every element.

#### Borders

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  CategoryAxisModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import clone from "clone";

let width = 2;

let radius = 8;

let color = "accentColor";

ModuleRegistry.registerModules([
  LineSeriesModule,
  CategoryAxisModule,
  NumberAxisModule,
  ZoomModule,
]);

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <label for="color-select">color:</label>
        <select id="color-select" class="gap-right" v-on:change="changeColor($event)">
          <option value="accentColor">accentColor (ref)</option>
          <option value="#d1495b">#d1495b</option>
          <option value="#21b372">#21b372</option>
        </select>
        <label for="width-range">width:</label>
        <input id="width-range" type="range" min="0" max="8" step="1" value="2" v-on:input="changeWidth($event)" v-on:change="changeWidth($event)">
          <span id="width-value" class="gap-right">2</span>
          <label for="radius-range">radius:</label>
          <input id="radius-range" type="range" min="0" max="20" step="1" value="8" v-on:input="changeRadius($event)" v-on:change="changeRadius($event)">
            <span id="radius-value">8</span>
          </div>
        </div>
        <ag-charts
          :options="options"
        />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<AgCartesianChartOptions>({
      theme: {
        params: {
          accentColor: "#2f6df0",
          buttonBorder: {
            width,
            color: color === "accentColor" ? { ref: "accentColor" } : color,
          },
          buttonBorderRadius: radius,
        },
      },
      title: {
        text: "Adjust the border on the zoom buttons",
      },
      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: "line", xKey: "month", yKey: "revenue", yName: "Revenue" },
      ],
      axes: {
        x: { type: "category" },
        y: { type: "number" },
      },
      zoom: {
        enabled: true,
        buttons: { visible: "always" },
      },
    });

    const updateBorder = () => {
      const optionsCopy = clone(options.value);

      optionsCopy.theme = {
        params: {
          accentColor: "#2f6df0",
          buttonBorder: {
            width,
            color: color === "accentColor" ? { ref: "accentColor" } : color,
          },
          buttonBorderRadius: radius,
        },
      };

      options.value = optionsCopy;
    };
    const changeWidth = (event) => {
      width = Number(event.target.value);
      document.getElementById("width-value").textContent = String(width);
      updateBorder();
    };
    const changeRadius = (event) => {
      radius = Number(event.target.value);
      document.getElementById("radius-value").textContent = String(radius);
      updateBorder();
    };
    const changeColor = (event) => {
      color = event.target.value;
      updateBorder();
    };

    return {
      options,
      changeWidth,
      changeRadius,
      changeColor,
    };
  },
});

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

[Live example: Borders](https://www.ag-grid.com/charts/vue3/themes/examples/theme-borders)

The controls style `buttonBorder`, shown on the zoom buttons.

```js
const myTheme = {
    params: {
        borderColor: '#cccccc',
        borderWidth: 1,
        borderRadius: 4,
        buttonBorder: { width: 2, color: { ref: 'accentColor' } },
        buttonBorderRadius: 8,
    },
};
```

- `borderColor`, `borderWidth`, `borderRadius` - global defaults for bordered elements (buttons, inputs, menus, tooltips).
- `<element>Border` - `boolean` to toggle, or `{ width, color }` to override. `color` accepts a [colour reference](#colour-references).
- `<element>BorderRadius` - corner radius, inheriting from `borderRadius`.

## Overrides

The `overrides` object is similar in its structure to the chart's options and is used as follows:

- Items in the `overrides.common` object are applied to all chart types.
- Items in the series specific object (e.g. `overrides.line`), are applied to charts of that series type.
- Series specific properties are found in the `series` object of the series type (e.g. `overrides.line.series`).
- The `axes` config contains one object for each axis type.

#### Custom Theme

```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 { getData } from "./data";

const myTheme = {
  palette: {
    fills: ["#006f9b", "#ff7faa", "#00994d", "#ff8833", "#00a0dd"],
    strokes: ["#003f58", "#934962", "#004a25", "#914d1d", "#006288"],
  },
  overrides: {
    common: {
      title: {
        fontSize: 24,
      },
    },
    bar: {
      series: {
        label: {
          enabled: true,
          color: "black",
        },
        strokeWidth: 1,
      },
    },
  },
};

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<AgChartOptions>({
      theme: myTheme,

      title: {
        text: "Custom Chart Theme Example",
      },
      data: getData(),
      series: [
        {
          type: "bar",
          xKey: "label",
          yKey: "v1",
          stacked: true,
          yName: "Reliability",
        },
        {
          type: "bar",
          xKey: "label",
          yKey: "v2",
          stacked: true,
          yName: "Ease of use",
        },
        {
          type: "bar",
          xKey: "label",
          yKey: "v3",
          stacked: true,
          yName: "Performance",
        },
        {
          type: "bar",
          xKey: "label",
          yKey: "v4",
          stacked: true,
          yName: "Price",
        },
        {
          type: "bar",
          xKey: "label",
          yKey: "v5",
          stacked: true,
          yName: "Market share",
        },
      ],
    });

    return {
      options,
    };
  },
});

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

[Live example: Custom Theme](https://www.ag-grid.com/charts/vue3/themes/examples/custom-theme)

```js
const myTheme = {
    palette: {
        fills: ['#5C2983', '#0076C5', '#21B372', '#FDDE02', '#F76700', '#D30018'],
        strokes: ['black'],
    },
    overrides: {
        common: {
            title: {
                fontSize: 24,
            },
        },
        bar: {
            series: {
                label: {
                    enabled: true,
                    color: 'black',
                },
                strokeWidth: 1,
            },
        },
    },
};
```

In the above example:

- A different palette of colours and strokes is provided for all series to use.
- The font size of the title is increased.
- The `bar` series has specific label and stroke options set.

## Advanced Custom Theme

#### Advanced Themes

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  PieSeriesModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";

const myTheme = {
  palette: {
    fills: ["#006f9b", "#ff7faa", "#00994d", "#ff8833", "#00a0dd"],
    strokes: ["#003f58", "#934962", "#004a25", "#914d1d", "#006288"],
  },
  params: {
    foregroundColor: "#262a33",
    backgroundColor: "#fff1e5",
    accentColor: "#0d7680",
    fontFamily: "Georgia, serif",
    fontSize: 14,
    tooltipBackgroundColor: "#fff7ef",
    tooltipTextColor: "#262a33",
  },
  overrides: {
    common: {
      title: {
        fontSize: 24,
      },
      padding: {
        left: 70,
        right: 70,
      },
      axes: {
        category: {
          line: {
            width: 4,
          },
        },
        number: {
          line: {
            width: 2,
          },
        },
      },
    },
    line: {
      series: {
        marker: {
          shape: "circle",
        },
      },
    },
    bar: {
      series: {
        label: {
          enabled: true,
          color: "white",
        },
      },
    },
    pie: {
      padding: {
        top: 40,
        bottom: 40,
      },
      legend: {
        position: "left",
      },
      series: {
        calloutLabel: {
          enabled: true,
        },
        calloutLine: {
          colors: ["#881008"],
        },
      },
    },
  },
};

ModuleRegistry.registerModules([
  BarSeriesModule,
  LegendModule,
  LineSeriesModule,
  PieSeriesModule,
  CategoryAxisModule,
  NumberAxisModule,
]);

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <button v-on:click="applyOptions('bar')">Bar &amp; Line Chart</button>
        <button v-on:click="applyOptions('pie')">Pie Chart</button>
      </div>
    </div>
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<AgChartOptions>({
      theme: myTheme,

      title: {
        text: "Multi-Type Chart Theme",
      },
      data: getData(),
      series: [
        {
          type: "bar",
          xKey: "label",
          yKey: "v1",
          stacked: true,
          yName: "Reliability",
        },
        {
          type: "bar",
          xKey: "label",
          yKey: "v2",
          stacked: true,
          yName: "Ease of use",
        },
        {
          type: "bar",
          xKey: "label",
          yKey: "v3",
          stacked: true,
          yName: "Performance",
        },
        {
          type: "line",
          xKey: "label",
          yKey: "v4",
          yName: "Price",
        },
      ],
    });

    const applyOptions = (type) => {
      const optionsCopy = clone(options.value);

      if (type === "pie") {
        optionsCopy.series = [
          {
            type: "pie",
            angleKey: "v4",
            calloutLabelKey: "label",
          },
        ];
      } else {
        const names = ["Reliability", "Ease of use", "Performance", "Price"];
        optionsCopy.series = [
          ...names.map((yName, idx) => ({
            type: idx <= 2 ? "bar" : "line",
            xKey: "label",
            yKey: `v${idx + 1}`,
            stacked: idx <= 2,
            yName,
          })),
        ];
      }

      options.value = optionsCopy;
    };

    return {
      options,
      applyOptions,
    };
  },
});

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

[Live example: Advanced Themes](https://www.ag-grid.com/charts/vue3/themes/examples/advanced-theme)

```js
const myTheme = {
    palette: {
        fills: ['#006f9b', '#ff7faa', '#00994d', '#ff8833', '#00a0dd'],
        strokes: ['#003f58', '#934962', '#004a25', '#914d1d', '#006288'],
    },
    params: {
        foregroundColor: '#262a33',
        backgroundColor: '#fff1e5',
        accentColor: '#0d7680',
        chromeBackgroundColor: '#fff7ef',
        chromeTextColor: '#262a33',
        fontFamily: 'Georgia, serif',
        fontSize: 14,
    },
    overrides: {
        common: {
            title: {
                fontSize: 24,
            },
            padding: {
                left: 70,
                right: 70,
            },
            axes: {
                category: {
                    line: {
                        width: 4,
                    },
                },
                number: {
                    line: {
                        width: 2,
                    },
                },
            },
        },
        line: {
            series: {
                marker: {
                    shape: 'circle',
                },
            },
        },
        bar: {
            series: {
                label: {
                    enabled: true,
                    color: 'white',
                },
            },
        },
        pie: {
            padding: {
                top: 40,
                bottom: 40,
            },
            legend: {
                position: 'left',
            },
            series: {
                calloutLabel: {
                    enabled: true,
                },
                calloutLine: {
                    colors: ['#881008'],
                },
            },
        },
    },
};
```

In the above example:

- A different palette of colours and strokes is provided for all series to use.
- Some `param` global styles are specified.
- Some `common` overrides are specified which apply to all chart types.
- Different axes overrides are specified for `category` and `number` axes types.
- Different series specific overrides are specified for `bar`, `line` and `pie` series.

## Figma Design System

![AG Charts Figma](https://www.ag-grid.com/charts/_astro/AG-Charts-Figma-Banner.CXE5NZHK.png)

The [AG Grid Figma Design System](https://www.figma.com/community/file/1360600846643230092) contains AG Charts components and templates to aid you in mocking up and theming AG Charts applications.

The design system contains UI components such as [tooltips](https://www.ag-grid.com/charts/vue/tooltips/), [menus](https://www.ag-grid.com/charts/vue/context-menu/), [navigators](https://www.ag-grid.com/charts/vue/navigator/), and [financial charts toolbars](https://www.ag-grid.com/charts/vue/financial-charts-toolbar/). There are also Figma assets to aid in the design of AG Charts [colour palettes](#palette). In addition, we supply a full range of components for mocking up [AG Grid integrated charts](https://ag-grid.com/react-data-grid/integrated-charts/) applications. Due to the limitations of Figma itself, we do not supply assets to mock up chart series.

To get started with the Figma Design System, visit the [AG Grid Figma Design System Figma community page](https://www.figma.com/community/file/1360600846643230092) and click the "**Open in Figma**" button.

> **Note**
>
> We supply the AG Grid Design System as a [Figma community file](https://www.figma.com/community/file/1360600846643230092). You will use the file by duplicating it to your Figma workspace. While we regularly update the AG Grid Design System, your duplicated files will not receive any updates automatically.
>
> For more information about how Figma community files function, please review the [Figma help pages on community files](https://help.figma.com/hc/en-us/articles/360038510873-Duplicate-Community-files).

### Figma Documentation & Video Tutorials

You’ll find comprehensive documentation for the design system right within the Figma file. We have guides for getting started and pre-made chart templates. Further detailed information about how each chart component works is also within the Figma file.

Watch our video on [Theming AG Charts in Figma with Variables and Tokens](https://youtu.be/KBCXZoNOtPA?si=GG_GIhx2Jr92sv6E). We also have a complete [playlist of in-depth videos](https://www.youtube.com/watch?v=yuT6sq68MII&list=PLsZlhayVgqNzE9G1yLLHQCRYSgDvx7Zo1) diving deeper into working with the AG Grid Figma design system.

[Theming Charts with Variables and Tokens](https://www.youtube.com/watch?v=LsTOBSXs-aY)

### Figma Support

AG Charts Enterprise customers can request support or suggest features and improvements via [Zendesk](https://ag-grid.zendesk.com/hc/en-us). Community users can file bug reports via our design system [GitHub repo issues](https://github.com/ag-grid/ag-grid-figma-design-system/issues).