---
title: "Themes"
framework: javascript
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/javascript/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 {
  AgCharts,
  AgPolarChartOptions,
  LegendModule,
  ModuleRegistry,
  PieSeriesModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([LegendModule, PieSeriesModule]);

const options: AgPolarChartOptions = {
  theme: "ag-default",
  title: {
    text: "Chart Theme Example",
  },
  data: getData(),
  series: [
    {
      type: "pie",
      angleKey: "value",
      calloutLabelKey: "label",
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function setThemeDefault() {
  options.theme = "ag-default";

  chart.update(options);
}

function setThemeSheets() {
  options.theme = "ag-sheets";

  chart.update(options);
}

function setThemePolychroma() {
  options.theme = "ag-polychroma";

  chart.update(options);
}

function setThemeVivid() {
  options.theme = "ag-vivid";

  chart.update(options);
}

function setThemeMaterial() {
  options.theme = "ag-material";

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).setThemeDefault = setThemeDefault;
  (<any>window).setThemeSheets = setThemeSheets;
  (<any>window).setThemePolychroma = setThemePolychroma;
  (<any>window).setThemeVivid = setThemeVivid;
  (<any>window).setThemeMaterial = setThemeMaterial;
}
```

[Live example: Stock Themes](https://www.ag-grid.com/charts/typescript/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 {
  AgCartesianChartOptions,
  AgChartTheme,
  AgCharts,
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

const paperTheme: AgChartTheme = {
  palette: {
    fills: ["#006f9b", "#ff7faa", "#00994d", "#ff8833", "#00a0dd"],
    strokes: ["#003f58", "#934962", "#004a25", "#914d1d", "#006288"],
  },
};
const oceanTheme: AgChartTheme = {
  palette: {
    fills: ["#072B6E", "#094890", "#0B6CA8", "#0C94B6", "#0DC9C9"],
    strokes: ["#051C48", "#073569", "#095686", "#097590", "#0A9999"],
  },
};
const neonTheme: AgChartTheme = {
  palette: {
    fills: ["#00ff1e", "#ff00dd", "#00fff7", "#8f00ff", "#ff0000"],
    strokes: ["#000"],
  },
};
ModuleRegistry.registerModules([
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const options: 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,
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function useDefaultTheme() {
  delete options.theme;

  chart.update(options);
}

function usePaperTheme() {
  options.theme = paperTheme;

  chart.update(options);
}

function useOceanTheme() {
  options.theme = oceanTheme;

  chart.update(options);
}

function useNeonTheme() {
  options.theme = neonTheme;

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).useDefaultTheme = useDefaultTheme;
  (<any>window).usePaperTheme = usePaperTheme;
  (<any>window).useOceanTheme = useOceanTheme;
  (<any>window).useNeonTheme = useNeonTheme;
}
```

[Live example: Palette](https://www.ag-grid.com/charts/typescript/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 {
  AgCartesianChartOptions,
  AgChartTheme,
  AgCharts,
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrossLinesModule,
  CrosshairModule,
  ErrorBarsModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

const paperTheme: AgChartTheme = {
  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: AgChartTheme = {
  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: AgChartTheme = {
  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: AgChartTheme = {
  baseTheme: "ag-default",
  overrides: {
    common: {
      subtitle: {
        text: "Default Theme",
      },
    },
  },
};
ModuleRegistry.registerModules([
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  CrosshairModule,
  CrossLinesModule,
  ErrorBarsModule,
  LegendModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const options: 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",
      },
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function useDefaultTheme() {
  options.theme = defaultTheme;

  chart.update(options);
}

function usePaperTheme() {
  options.theme = paperTheme;

  chart.update(options);
}

function useOceanTheme() {
  options.theme = oceanTheme;

  chart.update(options);
}

function useNeonTheme() {
  options.theme = neonTheme;

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).useDefaultTheme = useDefaultTheme;
  (<any>window).usePaperTheme = usePaperTheme;
  (<any>window).useOceanTheme = useOceanTheme;
  (<any>window).useNeonTheme = useNeonTheme;
}
```

[Live example: Theme Parameters](https://www.ag-grid.com/charts/typescript/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/javascript/colours/) for all accepted colour value forms.

#### Colour References

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  AgThemeColorParam,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

let colorRef: AgThemeColorParam = "accentColor";
let onto: AgThemeColorParam | "none" = "none";
let mix = 0.35;
ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  NumberAxisModule,
  LegendModule,
]);

const options: 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)" } },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

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

  chart.update(options);
}

function changeRef(event: Event) {
  colorRef = (event.target as HTMLSelectElement).value as AgThemeColorParam;
  updateTextColor();
}

function changeOnto(event: Event) {
  onto = (event.target as HTMLSelectElement).value as
    | AgThemeColorParam
    | "none";
  updateTextColor();
}

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

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).changeRef = changeRef;
  (<any>window).changeOnto = changeOnto;
  (<any>window).changeMix = changeMix;
}
```

[Live example: Colour References](https://www.ag-grid.com/charts/typescript/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 {
  AgCartesianChartOptions,
  AgCharts,
  CategoryAxisModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";

let width = 2;
let radius = 8;
let color = "accentColor";
ModuleRegistry.registerModules([
  LineSeriesModule,
  CategoryAxisModule,
  NumberAxisModule,
  ZoomModule,
]);

const options: 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" },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function updateBorder() {
  options.theme = {
    params: {
      accentColor: "#2f6df0",
      buttonBorder: {
        width,
        color: color === "accentColor" ? { ref: "accentColor" } : color,
      },
      buttonBorderRadius: radius,
    },
  };

  chart.update(options);
}

function changeWidth(event: Event) {
  width = Number((event.target as HTMLInputElement).value);
  document.getElementById("width-value")!.textContent = String(width);
  updateBorder();
}

function changeRadius(event: Event) {
  radius = Number((event.target as HTMLInputElement).value);
  document.getElementById("radius-value")!.textContent = String(radius);
  updateBorder();
}

function changeColor(event: Event) {
  color = (event.target as HTMLSelectElement).value;
  updateBorder();
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).changeWidth = changeWidth;
  (<any>window).changeRadius = changeRadius;
  (<any>window).changeColor = changeColor;
}
```

[Live example: Borders](https://www.ag-grid.com/charts/typescript/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 {
  AgChartOptions,
  AgChartTheme,
  AgCharts,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

const myTheme: AgChartTheme = {
  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 options: 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",
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Custom Theme](https://www.ag-grid.com/charts/typescript/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 {
  AgChartOptions,
  AgChartTheme,
  AgCharts,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  PieSeriesModule,
} from "ag-charts-community";
import { getData } from "./data";

const myTheme: AgChartTheme = {
  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 options: 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",
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

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

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).applyOptions = applyOptions;
}
```

[Live example: Advanced Themes](https://www.ag-grid.com/charts/typescript/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/javascript/tooltips/), [menus](https://www.ag-grid.com/charts/javascript/context-menu/), [navigators](https://www.ag-grid.com/charts/javascript/navigator/), and [financial charts toolbars](https://www.ag-grid.com/charts/javascript/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).