---
title: "Chart Customisation"
enterprise: true
framework: javascript
version: "36.1.0"
---

# Chart Customisation

Integrated Charts can be customised via the [AG Charts Theme API](https://www.ag-grid.com/charts/themes-api/).

## Provided Themes

The following themes are provided to Integrated Charts by default.

```js
['ag-default', 'ag-material', 'ag-sheets', 'ag-polychroma', 'ag-vivid']
```

These themes correspond to [AG Charts Base Themes](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-baseTheme).

> **Note**
>
> When using a dark colour scheme for the grid, the application must provide the dark equivalents of the chart themes. If a default AG Chart theme is used, the dark themes are named with a `-dark` suffix, e.g. `'ag-vivid-dark'`.

The selected theme can be changed by the user via the [Chart Tool Panel](https://www.ag-grid.com/javascript-data-grid/integrated-charts-chart-tool-panels/) or by changing the order of the provided themes using the `chartThemes` grid option as shown below:

```js
const gridOptions = {
    chartThemes: ['ag-vivid', 'ag-polychroma', 'ag-material', 'ag-sheets', 'ag-default'],

    // other grid options ...
}
```

## Overriding Themes

Integrated Charts uses a theme based configuration which 'overrides' the theme defaults.

To override a charts theme, use the `chartsThemeOverrides` grid option.

```js
const gridOptions = {
    chartThemeOverrides: {
        common: {
            title: {
                fontSize: 22,
                fontFamily: 'Arial, sans-serif'
            }
        }
    },

    // other grid options ...
}
```

> **Note**
>
> Note that the `chartThemeOverrides` grid option maps to [AG Charts Theme Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides).

### Common Overrides

These overrides can be used with any series type. For full list of overrides see [Common Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides-common) in the AG Charts documentation.

#### Common Overrides

```ts
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  ClientSideRowModelModule,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let gridApi: GridApi;

const gridOptions: GridOptions = {
  columnDefs: [
    { field: "country", width: 150, chartDataType: "category" },
    { field: "gold", chartDataType: "series" },
    { field: "silver", chartDataType: "series" },
    { field: "bronze", chartDataType: "series" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  popupParent: document.body,
  cellSelection: true,
  enableCharts: true,
  chartThemeOverrides: {
    common: {
      title: {
        enabled: true,
        text: "Precious Metals Production",
      },
      subtitle: {
        enabled: true,
        text: "by country",
        fontSize: 14,
        fontFamily: "Monaco, monospace",
        color: "#aaa",
        spacing: 10,
      },
      padding: {
        left: 80,
        right: 80,
      },
      legend: {
        spacing: 30,
        item: {
          label: {
            fontStyle: "italic",
            fontWeight: "bold",
            fontSize: 18,
            fontFamily: "Palatino, serif",
            color: "#aaa",
          },
          marker: {
            shape: "circle",
            size: 10,
            padding: 10,
            strokeWidth: 2,
          },
          padding: {
            left: 15,
            right: 15,
          },
        },
      },
    },
  },
  onGridReady: (params: GridReadyEvent) => {
    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  },
  onFirstDataRendered,
};

function onFirstDataRendered(params: FirstDataRenderedEvent) {
  params.api.createRangeChart({
    cellRange: {
      rowStartIndex: 0,
      rowEndIndex: 3,
      columns: ["country", "gold", "silver", "bronze"],
    },
    chartType: "groupedColumn",
  });
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
```

[Live example: Common Overrides](https://www.ag-grid.com/examples/integrated-charts-customisation/common-overrides/typescript)

### Chart-specific Overrides

The following documentation links describe different types of overrides specific to individual AG Charts series types.

- [Line Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides-line)
- [Bar Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides-bar)
- [Area Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides-area)
- [Scatter Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides-scatter)
- [Pie Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides-pie)
- [Radar Line Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides-radar-line)
- [Radar Area Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides-radar-area)
- [Nightingale Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides-nightingale)
- [Radial Column Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides-radial-column)
- [Radial Bar Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides-radial-bar)
- [Range Bar Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides-range-bar)
- [Range Area Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides-range-area)
- [Box Plot Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides-box-plot)
- [Waterfall Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides-waterfall)
- [Heatmap Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides-heatmap)
- [Treemap Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides-treemap)
- [Sunburst Overrides](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides-sunburst)

## Custom Chart Themes

Custom [AG Charts Themes](https://www.ag-grid.com/charts/react/themes/) can also be supplied to the grid via the `customChartThemes` grid option.

```js
const gridOptions = {
    customChartThemes: {
        myCustomTheme: {
            palette: {
                fills: ['#42a5f5', '#ffa726', '#81c784'],
                strokes: ['#000000', '#424242'],
            },
            overrides: {
                common: {
                    background: {
                        fill: '#f4f4f4',
                    },
                    legend: {
                        item: {
                            label: {
                                color: '#333333',
                            },
                        },
                    },
                },
            },
        },
        chartThemes: ['myCustomTheme', 'ag-vivid'],
    },

    // other grid options ...
}
```

The example below shows a custom chart theme being used with the grid. Note that other provided themes can be used alongside a custom theme, and are unaffected by the settings in the custom theme.

#### Custom Chart Theme

```ts
import {
  AgChartsEnterpriseModule,
  AgThemeOverrides,
} from "ag-charts-enterprise";
import {
  ClientSideRowModelModule,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { deepMerge, getData } from "./data";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let gridApi: GridApi;

const commonThemeProperties: { overrides: AgThemeOverrides } = {
  overrides: {
    common: {
      legend: {
        position: "top",
        spacing: 25,
        item: {
          label: {
            fontStyle: "italic",
            fontWeight: "bold",
            fontSize: 18,
            fontFamily: "Palatino, serif",
          },
          marker: {
            shape: "circle",
            size: 14,
            padding: 8,
            strokeWidth: 2,
          },
        },
      },
    },
    bar: {
      axes: {
        number: {
          line: {
            width: 4,
          },
        },
        category: {
          line: {
            width: 2,
          },
          label: {
            rotation: 0,
          },
        },
      },
    },
  },
};

const myCustomOverridesLight: { overrides: AgThemeOverrides } = {
  overrides: {
    common: {
      background: {
        fill: "#f4f4f4",
      },
      legend: {
        item: {
          label: {
            color: "#333333",
          },
        },
      },
    },
    bar: {
      axes: {
        number: {
          bottom: {
            line: {
              stroke: "#424242",
            },
            label: {
              color: "#555555",
              fontStyle: "italic",
              fontWeight: "bold",
              fontSize: 12,
              spacing: 5,
            },
          },
        },
        category: {
          left: {
            line: {
              stroke: "#424242",
            },
            label: {
              color: "#555555",
              fontStyle: "italic",
              fontWeight: "bold",
              fontSize: 14,
              spacing: 8,
            },
          },
        },
      },
    },
  },
};

const myCustomThemeLight = deepMerge(commonThemeProperties, {
  palette: {
    fills: ["#42a5f5", "#ffa726", "#81c784"],
    strokes: ["#000000", "#424242"],
  },
  ...myCustomOverridesLight,
});

const myCustomOverridesDark: { overrides: AgThemeOverrides } = {
  overrides: {
    common: {
      background: {
        fill: "#15181c",
      },
      legend: {
        item: {
          label: {
            color: "#ECEFF1",
          },
        },
      },
    },
    bar: {
      axes: {
        number: {
          bottom: {
            line: {
              stroke: "#757575",
            },
            label: {
              color: "#B0BEC5",
              fontStyle: "italic",
              fontWeight: "bold",
              fontSize: 12,
              spacing: 5,
            },
          },
        },
        category: {
          left: {
            line: {
              stroke: "#757575",
            },
            label: {
              color: "#B0BEC5",
              fontStyle: "italic",
              fontWeight: "bold",
              fontSize: 14,
              spacing: 8,
            },
          },
        },
      },
    },
  },
};

const myCustomThemeDark = deepMerge(commonThemeProperties, {
  palette: {
    fills: ["#42a5f5", "#ffa726", "#81c784"],
    strokes: ["#ffffff", "#B0BEC5"],
  },
  ...myCustomOverridesDark,
});

const gridOptions: GridOptions = {
  columnDefs: [
    { field: "country", width: 150, chartDataType: "category" },
    { field: "gold", chartDataType: "series" },
    { field: "silver", chartDataType: "series" },
    { field: "bronze", chartDataType: "series" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  popupParent: document.body,
  cellSelection: true,
  enableCharts: true,
  chartThemes: ["my-custom-theme-light", "my-custom-theme-dark"],
  customChartThemes: {
    "my-custom-theme-light": myCustomThemeLight,
    "my-custom-theme-dark": myCustomThemeDark,
  },
  onGridReady: (params: GridReadyEvent) => {
    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  },
  onFirstDataRendered,
};

function onFirstDataRendered(params: FirstDataRenderedEvent) {
  params.api.createRangeChart({
    cellRange: {
      rowStartIndex: 0,
      rowEndIndex: 4,
      columns: ["country", "gold", "silver", "bronze"],
    },
    chartType: "groupedBar",
  });
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
```

[Live example: Custom Chart Theme](https://www.ag-grid.com/examples/integrated-charts-customisation/custom-chart-theme/typescript)

## Formatting

Chart values can be formatted in several different ways.

### Label Formatting

> **Note**
>
> The `valueFormatter` is not automatically applied to the chart axes. If you wish to use the grid's value formatters, you must apply them manually.

Custom label formatting can be applied to the chart axes by providing suitable formatters.

```js
const gridOptions = {
    chartThemeOverrides: {
        common: {
            axes: {
                number: {
                    label: {
                        formatter: function(params) {
                            // prefix with dollar sign
                            return '$' + params.value;
                        },
                    },
                },
            },
        },
    },

    // other grid options ...
}
```

The example below shows:

- A custom label formatter being used with the vertical axis to display SI units for the data. Additionally, this example demonstrates the use of the `domain` property passed through to the formatter to provide a consistent scale across the value range.
- A custom title formatter using `boundSeries` property passed through to the formatter for the vertical axis to display which series the axes are representing.

#### Label Formatting

```ts
import {
  AgAxisCaptionFormatterParams,
  AgAxisLabelFormatterParams,
  AgChartsEnterpriseModule,
} from "ag-charts-enterprise";
import {
  ClientSideRowModelModule,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { data } from "./data";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

const titleFormatter = (params: AgAxisCaptionFormatterParams) =>
  `Power (${params.boundSeries.map((s) => s.name).join(", ")})`;

function createSIFormatter(units = "", precision = 0) {
  const SI_UNITS = ["", "K", "M", "G"];
  let tier: number | undefined;

  function calculateSITier(domain: number[]): number {
    const [min, max] = domain;
    const value = Math.max(Math.abs(min), Math.abs(max));
    return Math.floor(Math.log10(Math.abs(value)) / 3);
  }

  function formatSI(value: number, tier: number, precision: number) {
    if (value === 0) {
      return "0";
    }

    const suffix = SI_UNITS[tier] || "";
    const scaled = value / 10 ** (tier * 3);

    return `${scaled.toFixed(precision)}${suffix}${units}`;
  }

  return (params: AgAxisLabelFormatterParams) => {
    tier ??= calculateSITier(params.domain);
    return formatSI(params.value as number, tier, precision);
  };
}

const siFormatter = createSIFormatter("W", 2);

const isEfficiencySeries = (params: any) =>
  params.boundSeries.find((s: any) => s.key === "efficiency");

let gridApi: GridApi;

const gridOptions: GridOptions = {
  columnDefs: [
    { field: "year", width: 150, chartDataType: "category" },
    { field: "generated", chartDataType: "series", cellDataType: "number" },
    { field: "consumed", chartDataType: "series", cellDataType: "number" },
    { field: "surplus", chartDataType: "series", cellDataType: "number" },
    { field: "efficiency", chartDataType: "series", cellDataType: "number" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  popupParent: document.body,
  cellSelection: true,
  enableCharts: true,
  chartThemeOverrides: {
    common: {
      axes: {
        number: {
          title: {
            enabled: true,
            formatter: (params) => {
              return isEfficiencySeries(params)
                ? "Efficiency (%)"
                : titleFormatter(params);
            },
          },
          label: {
            formatter: (params) => {
              return isEfficiencySeries(params)
                ? `${params.value}%`
                : siFormatter(params);
            },
          },
        },
      },
    },
  },
  onGridReady: (params: GridReadyEvent) => {
    params.api.setGridOption("rowData", data);
  },
  onFirstDataRendered,
};

function onFirstDataRendered(params: FirstDataRenderedEvent) {
  params.api.createRangeChart({
    cellRange: {
      rowStartIndex: 0,
      rowEndIndex: 4,
      columns: ["year", "generated", "consumed", "surplus", "efficiency"],
    },
    seriesChartTypes: [
      { colId: "generated", chartType: "groupedColumn", secondaryAxis: false },
      { colId: "consumed", chartType: "groupedColumn", secondaryAxis: false },
      { colId: "surplus", chartType: "groupedColumn", secondaryAxis: false },
      { colId: "efficiency", chartType: "line", secondaryAxis: true },
    ],
    chartType: "columnLineCombo",
    chartContainer: document.querySelector("#myChart") as any,
    aggFunc: "sum",
  });
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
```

[Live example: Label Formatting](https://www.ag-grid.com/examples/integrated-charts-customisation/label-formatting/typescript)

For more information on the `formatter` property for axes labels, see AG Charts Axis Labels [Label Text Formatting](https://www.ag-grid.com/charts/javascript/axes-labels/#label-text-formatting).

### Global Formatter

A single, top‑level `formatter` can be used to control the text for every label‑bearing element, e.g. axes, series labels, legend items, callouts, etc. The formatter will run for each element, unless that element defines its own `formatter`.

The callback receives the similar `params` object provided to element‑level formatters, providing access to properties such as `value`, `type`, and `elementId`. See the [AG Charts API Reference](https://charts.ag-grid.com/themes-api/#reference-AgChartTheme-overrides-common-formatter) for more information.

```js
const gridOptions = {
    chartThemeOverrides: {
        common: {
            formatter: (params) => {
                if (params.type === 'number') {
                    return `£${params.value}`;
                    // prefix with `£` sign
                }
                const gridApi = params.context.api;
                // do something with the grid API
            }
        }
    },

    // other grid options ...
}
```

The example below shows a global formatter that prefixes all number values with a `£` symbol.

#### Global Label Formatter

```ts
import {
  AgChartsEnterpriseModule,
  FormatterParams,
} from "ag-charts-enterprise";
import {
  ChartRef,
  ChartType,
  ClientSideRowModelModule,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let gridApi: GridApi;
let chartRef: ChartRef;

const gridOptions: GridOptions = {
  columnDefs: [
    {
      field: "period",
      chartDataType: "category",
      headerName: "Financial Period",
      width: 150,
    },
    {
      field: "recurring",
      chartDataType: "series",
      headerName: "Recurring Revenue",
    },
    {
      field: "individual",
      chartDataType: "series",
      headerName: "Individual Sales",
    },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  popupParent: document.body,
  cellSelection: true,
  enableCharts: true,
  chartToolPanelsDef: {
    defaultToolPanel: "settings",
  },
  onGridReady: (params: GridReadyEvent) => {
    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  },
  onFirstDataRendered,
  chartThemeOverrides: {
    common: {
      formatter: (params: FormatterParams) => {
        if (params.type === "number") {
          return `£${params.value}`;
        }
      },
    },
  },
};

function onFirstDataRendered(params: FirstDataRenderedEvent) {
  chartRef = params.api.createRangeChart({
    chartContainer: document.querySelector("#myChart") as HTMLElement,
    cellRange: {
      columns: ["period", "recurring", "individual"],
    },
    chartType: "groupedColumn",
  })!;
}

function updateChart(chartType: ChartType) {
  gridApi.updateChart({
    type: "rangeChartUpdate",
    chartId: `${chartRef.chartId}`,
    chartType: chartType,
  });
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

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

[Live example: Global Label Formatter](https://www.ag-grid.com/examples/integrated-charts-customisation/global-label-formatter/typescript)

The order of formatting is as follows:

1. Element‑specific `label.formatter` (axis, series, legend, callout, etc.)
2. Global `formatter`
3. Default AG Charts formatting rules

### Accessing Grid Context in Formatters

The grid will pass the grid API and context into the `context` property of the formatter parameters.

Properties available on the `GridChartContext&lt;TData = any, TContext = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `api` | [`GridApi`](https://www.ag-grid.com/javascript-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/javascript-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |

For formatters that are directly linked to row data, the row node will be passed in the `datum.node` property (note that `datum` may be undefined).

For formatters related to columns, the `key` property will usually contain the column ID. In some instances this will be in the `key` property of the corresponding series in the `boundSeries` property.

In the example below, the global formatter is used to access the `valueFormatter` in each of the columns:

- The x axis uses the **Financial Period** column value formatter.
- The y axis does not use a formatter as it belongs to multiple columns.
- The tooltip (when mousing over the series) uses the value formatters from each of the three columns.

#### Formatter Context

```ts
import {
  AgChartsEnterpriseModule,
  FormatterParams,
} from "ag-charts-enterprise";
import {
  ChartRef,
  ChartType,
  ClientSideRowModelModule,
  ColumnApiModule,
  FirstDataRenderedEvent,
  GridApi,
  GridChartContext,
  GridOptions,
  GridReadyEvent,
  IRowNode,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
  ColumnApiModule,
]);

let gridApi: GridApi;
let chartRef: ChartRef;

const gridOptions: GridOptions = {
  columnDefs: [
    {
      field: "period",
      chartDataType: "category",
      headerName: "Financial Period",
      width: 150,
      valueFormatter: (params) => {
        const parts = params.value?.split(" ");
        return parts ? `${parts[1]} - ${parts[0]}` : "";
      },
    },
    {
      field: "recurring",
      chartDataType: "series",
      headerName: "Recurring Revenue",
      valueFormatter: (params) => {
        return `£${params.value}`;
      },
    },
    {
      field: "individual",
      chartDataType: "series",
      headerName: "Individual Sales",
      valueFormatter: (params) => {
        return `$${params.value}`;
      },
    },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  popupParent: document.body,
  cellSelection: true,
  enableCharts: true,
  chartToolPanelsDef: {
    defaultToolPanel: "settings",
  },
  onGridReady: (params: GridReadyEvent) => {
    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  },
  onFirstDataRendered,
  chartThemeOverrides: {
    common: {
      formatter: (params: FormatterParams) => {
        const { type, key, datum, value, context, boundSeries } = params;
        if (type === "number") {
          return formatValue(
            key,
            datum?.node,
            context as GridChartContext,
            value,
          );
        }
        if (type === "category") {
          return formatValue(
            boundSeries?.[0]?.key,
            datum?.node,
            context as GridChartContext,
            value?.toString(),
          );
        }
        // fall back to default
        return undefined;
      },
    },
  },
};

function formatValue(
  colId: string | undefined,
  node: IRowNode | undefined,
  chartContext: GridChartContext,
  value: any,
) {
  const column = colId ? chartContext.api.getColumn(colId) : null;
  if (column) {
    const colDef = column.getColDef();
    const valueFormatter = colDef.valueFormatter;
    if (typeof valueFormatter === "function") {
      const formattedValue = valueFormatter({
        ...chartContext,
        column,
        colDef,
        node: node ?? null,
        data: node?.data,
        value,
      });
      return formattedValue;
    }
  }
  return undefined;
}

function onFirstDataRendered(params: FirstDataRenderedEvent) {
  chartRef = params.api.createRangeChart({
    chartContainer: document.querySelector("#myChart") as HTMLElement,
    cellRange: {
      columns: ["period", "recurring", "individual"],
    },
    chartType: "groupedColumn",
  })!;
}

function updateChart(chartType: ChartType) {
  gridApi.updateChart({
    type: "rangeChartUpdate",
    chartId: `${chartRef.chartId}`,
    chartType: chartType,
  });
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

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

[Live example: Formatter Context](https://www.ag-grid.com/examples/integrated-charts-customisation/formatter-context/typescript)