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

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgPolarChartOptions,
  LegendModule,
  ModuleRegistry,
  PieSeriesModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";

ModuleRegistry.registerModules([LegendModule, PieSeriesModule]);

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

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

    nextOptions.theme = "ag-default";

    setOptions(nextOptions);
  };

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

    nextOptions.theme = "ag-sheets";

    setOptions(nextOptions);
  };

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

    nextOptions.theme = "ag-polychroma";

    setOptions(nextOptions);
  };

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

    nextOptions.theme = "ag-vivid";

    setOptions(nextOptions);
  };

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

    nextOptions.theme = "ag-material";

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={setThemeDefault}>Default Theme</button>
          <button onClick={setThemeSheets}>Sheets Theme</button>
          <button onClick={setThemePolychroma}>Polychroma Theme</button>
          <button onClick={setThemeVivid}>Vivid Theme</button>
          <button onClick={setThemeMaterial}>Material Theme</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

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

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AgChartTheme,
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

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

    delete nextOptions.theme;

    setOptions(nextOptions);
  };

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

    nextOptions.theme = paperTheme;

    setOptions(nextOptions);
  };

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

    nextOptions.theme = oceanTheme;

    setOptions(nextOptions);
  };

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

    nextOptions.theme = neonTheme;

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={useDefaultTheme}>Default</button>
          <button onClick={usePaperTheme}>Paper</button>
          <button onClick={useOceanTheme}>Ocean</button>
          <button onClick={useNeonTheme}>Neon</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

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

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AgChartTheme,
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrossLinesModule,
  CrosshairModule,
  ErrorBarsModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

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

    nextOptions.theme = defaultTheme;

    setOptions(nextOptions);
  };

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

    nextOptions.theme = paperTheme;

    setOptions(nextOptions);
  };

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

    nextOptions.theme = oceanTheme;

    setOptions(nextOptions);
  };

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

    nextOptions.theme = neonTheme;

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={useDefaultTheme}>Default</button>
          <button onClick={usePaperTheme}>Paper</button>
          <button onClick={useOceanTheme}>Ocean</button>
          <button onClick={useNeonTheme}>Neon</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

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

#### Colour References

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

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

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

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

    setOptions(nextOptions);
  };

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

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

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

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <div className="gap-right">
            <label htmlFor="ref-select">ref:</label>
            <select id="ref-select" onChange={(event) => changeRef(event)}>
              <option value="accentColor">accentColor</option>
              <option value="foregroundColor">foregroundColor</option>
              <option value="backgroundColor">backgroundColor</option>
            </select>
          </div>
          <div className="gap-right">
            <label htmlFor="onto-select">onto:</label>
            <select id="onto-select" onChange={(event) => 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 htmlFor="mix-range">
              mix: <span id="mix-value">0.35</span>
            </label>
            <input
              id="mix-range"
              type="range"
              min="0"
              max="1"
              step="0.05"
              defaultValue="0.35"
              onInput={(event) => changeMix(event)}
            />
          </div>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

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

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  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 = () => {
  const [options, setOptions] = useState<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 nextOptions = clone(options);

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

    setOptions(nextOptions);
  };

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

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

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

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <label htmlFor="color-select">color:</label>
          <select
            id="color-select"
            className="gap-right"
            onChange={(event) => changeColor(event)}
          >
            <option value="accentColor">accentColor (ref)</option>
            <option value="#d1495b">#d1495b</option>
            <option value="#21b372">#21b372</option>
          </select>
          <label htmlFor="width-range">width:</label>
          <input
            id="width-range"
            type="range"
            min="0"
            max="8"
            step="1"
            defaultValue="2"
            onInput={(event) => changeWidth(event)}
            onChange={(event) => changeWidth(event)}
          />
          <span id="width-value" className="gap-right">
            2
          </span>
          <label htmlFor="radius-range">radius:</label>
          <input
            id="radius-range"
            type="range"
            min="0"
            max="20"
            step="1"
            defaultValue="8"
            onInput={(event) => changeRadius(event)}
            onChange={(event) => changeRadius(event)}
          />
          <span id="radius-value">8</span>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

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

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AgChartTheme,
  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 ChartExample = () => {
  const [options, setOptions] = useState<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 <AgCharts options={options} />;
};

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

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

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AgChartTheme,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  PieSeriesModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";

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 ChartExample = () => {
  const [options, setOptions] = useState<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: "bar" | "pie") => {
    const nextOptions = clone(options);

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

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={() => applyOptions("bar")}>
            Bar &amp; Line Chart
          </button>
          <button onClick={() => applyOptions("pie")}>Pie Chart</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

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