---
title: "Chart Tool Panels"
enterprise: true
framework: javascript
version: "36.1.0"
---

# Chart Tool Panels

The Chart Tool Panels allow users to change the selected chart type and customise the data and chart formatting.

#### Chart Tool Panels

```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", chartDataType: "category", width: 150 },
    { field: "gold", chartDataType: "series" },
    { field: "silver", chartDataType: "series" },
    { field: "bronze", chartDataType: "series" },
  ],
  defaultColDef: { flex: 1 },
  cellSelection: true,
  popupParent: document.body,
  enableCharts: true,
  chartToolPanelsDef: {
    defaultToolPanel: "settings",
  },
  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: "groupedColumn",
  });
}

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

[Live example: Chart Tool Panels](https://www.ag-grid.com/examples/integrated-charts-chart-tool-panels/chart-tool-panels/typescript)

The Chart Tool Panels are accessed by selecting `Edit Chart` from the [Chart Menu](https://www.ag-grid.com/javascript-data-grid/integrated-charts-menu/) in the top-right corner of the chart. Note they can also be opened via configuration (see examples in this section), or programmatically through the Grid API, see [Open / Close Chart Tool Panels](#chart-tool-panel-api).

## Chart Tool Panel

The Chart Panel can be used to change the chart type and chart theme.

![Chart Settings Panel](https://www.ag-grid.com/_astro/chart-panel.oxdHktUE.png)

Chart Panel

It is possible to configure which chart groups and chart types are included and in which order via the `chartToolPanelsDef` grid option:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `chartToolPanelsDef` | `ChartToolPanelsDef` |  |  | Allows customisation of the Chart Tool Panels, such as changing the tool panels visibility and order, as well as choosing which charts should be displayed in the chart panel. Module: [`IntegratedChartsModule`](https://www.ag-grid.com/javascript-data-grid/modules/). [Initial](https://www.ag-grid.com/javascript-data-grid/grid-interface/#initial-grid-options). |

Note that the Chart Panel key is `settingsPanel`.

The full list of chart groups with the corresponding chart types are shown below:

```ts

interface ChartGroupsDef {
  columnGroup?: ('column'  |  'stackedColumn'  |  'normalizedColumn')[];
  barGroup?: ('bar'  |  'stackedBar'  |  'normalizedBar')[];
  pieGroup?: ('pie'  |  'donut'  |  'doughnut')[];
  lineGroup?: ('line'  |  'stackedLine'  |  'normalizedLine')[];
  areaGroup?: ('area'  |  'stackedArea'  |  'normalizedArea')[];
  scatterGroup?: ('scatter'  |  'bubble')[];
  combinationGroup?: ('columnLineCombo'  |  'areaColumnCombo'  |  'customCombo')[];
  polarGroup?: ('radarLine'  |  'radarArea'  |  'nightingale'  |  'radialColumn'  |  'radialBar')[];
  statisticalGroup?: ('boxPlot'  |  'histogram'  |  'rangeBar'  |  'rangeArea')[];
  hierarchicalGroup?: ('treemap'  |  'sunburst')[];
  specializedGroup?: ('heatmap'  |  'waterfall')[];
  funnelGroup?: ('funnel'  |  'coneFunnel'  |  'pyramid')[];
}
```

> **Note**
>
> The contents and order of chart menu items in the [Context Menu](https://www.ag-grid.com/javascript-data-grid/context-menu/) will match the `ChartGroupsDef` configuration.

The example below shows a subset of the provided chart groups with the chart types reordered. Note the following:

- Only the **Pie**, **Columns** and **Bar** chart groups are shown in the chart panel.
- Only the **Pie**, **Columns** and **Bar** chart groups are shown in the Context Menu when you right click the grid.
- Note the order of the chart groups and their chart types matches the order they are specified in `chartGroupsDef`.
- The Chart Panel is configured to be open by default via `defaultToolPanel: 'settings'`.

#### Chart Tool Panel Customisation

```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", chartDataType: "category", width: 150 },
    { field: "gold", chartDataType: "series" },
    { field: "silver", chartDataType: "series" },
    { field: "bronze", chartDataType: "series" },
  ],
  defaultColDef: { flex: 1 },
  cellSelection: true,
  popupParent: document.body,
  enableCharts: true,
  chartToolPanelsDef: {
    defaultToolPanel: "settings",
    settingsPanel: {
      chartGroupsDef: {
        pieGroup: ["donut", "pie"],
        columnGroup: ["stackedColumn", "column", "normalizedColumn"],
        barGroup: ["bar"],
      },
    },
  },
  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: "groupedColumn",
  });
}

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

[Live example: Chart Tool Panel Customisation](https://www.ag-grid.com/examples/integrated-charts-chart-tool-panels/settings-panel-customisation/typescript)

## Set Up Tool Panel

The Set Up Panel can be used to change the chart category and series. It is not applicable for Pivot Charts.

![Chart Set Up Panel](https://www.ag-grid.com/_astro/data-panel.BQETOtl-.png)

Chart Set Up Panel

It is possible to configure which groups are shown, the order in which they appear and whether they are opened by default via the `chartToolPanelsDef` grid option:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `chartToolPanelsDef` | `ChartToolPanelsDef` |  |  | Allows customisation of the Chart Tool Panels, such as changing the tool panels visibility and order, as well as choosing which charts should be displayed in the chart panel. Module: [`IntegratedChartsModule`](https://www.ag-grid.com/javascript-data-grid/modules/). [Initial](https://www.ag-grid.com/javascript-data-grid/grid-interface/#initial-grid-options). |

Note that the Set Up Panel key is `dataPanel`.

The default list and order of the Set Up Panel groups are as shown below:

```js
const gridOptions = {
    chartToolPanelsDef: {
        dataPanel: {
            groups: [
                { type: 'categories', isOpen: true },
                { type: 'series', isOpen: true },
                { type: 'seriesChartType', isOpen: true }
            ]
        }
    },

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

> **Note**
>
> The `seriesChartType` group is only shown in [Combination Charts](https://www.ag-grid.com/javascript-data-grid/integrated-charts-api-range-chart/#combination-charts).

The following example shows some Set Up Panel customisations. Note the following:

- The **Categories** group is not included.
- The **Series** group is closed by default.
- The Set Up Panel is configured to be open by default via `defaultToolPanel: 'data'`.

#### Set Up Tool Panel Customisation

```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", chartDataType: "category", width: 150 },
    { field: "gold", chartDataType: "series" },
    { field: "silver", chartDataType: "series" },
    { field: "bronze", chartDataType: "series" },
  ],
  defaultColDef: { flex: 1 },
  cellSelection: true,
  popupParent: document.body,
  enableCharts: true,
  chartToolPanelsDef: {
    defaultToolPanel: "data",
    dataPanel: {
      groups: [
        { type: "seriesChartType", isOpen: true },
        { type: "series", isOpen: false },
      ],
    },
  },
  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: "groupedColumn",
  });
}

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

[Live example: Set Up Tool Panel Customisation](https://www.ag-grid.com/examples/integrated-charts-chart-tool-panels/data-panel-customisation/typescript)

## Customize Tool Panel

The Customize Panel allows users to format the chart where the available formatting options differ between chart types.

![Chart Customize Panel](https://www.ag-grid.com/_astro/format-panel.svVE9ZR8.png)

Chart Customize Panel

It is possible to configure which groups are shown, the order in which they appear and whether they are opened by default via the `chartToolPanelsDef` grid option:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `chartToolPanelsDef` | `ChartToolPanelsDef` |  |  | Allows customisation of the Chart Tool Panels, such as changing the tool panels visibility and order, as well as choosing which charts should be displayed in the chart panel. Module: [`IntegratedChartsModule`](https://www.ag-grid.com/javascript-data-grid/modules/). [Initial](https://www.ag-grid.com/javascript-data-grid/grid-interface/#initial-grid-options). |

Note that the Customize Panel key is `formatPanel`.

The default list and order of format groups are as follows:

```js
const gridOptions = {
    chartToolPanelsDef: {
        formatPanel: {
            groups: [
                { type: 'chart', isOpen: false },
                { type: 'titles', isOpen: false },
                { type: 'legend', isOpen: false },
                { type: 'horizontalAxis', isOpen: false },
                { type: 'verticalAxis', isOpen: false },
                { type: 'series', isOpen: false },
            ]
        }
    },

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

> **Note**
>
> The selected chart determines which groups are displayed. For example, a pie chart does not have an axis so **Axis** groups will not be shown even if they are listed in `chartToolPanelsDef.formatPanel.groups`.
>
> For chart types that have both horizontal and vertical axes, the `axis` group can be replaced with the more specific `horizontalAxis` and `verticalAxis` groups to control these options independently.

The following example shows some Customize Panel customisations. Note the following:

- The customize panel groups have been reordered.
- The **Horizontal Axis** group is open by default.
- The **Title** and **Legend** groups have been omitted.
- The Customize Panel is configured to be open by default via `defaultToolPanel: 'format'`.

#### Customize Tool Panel Customisation

```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 },
  popupParent: document.body,
  cellSelection: true,
  enableCharts: true,
  chartToolPanelsDef: {
    defaultToolPanel: "format",
    formatPanel: {
      groups: [
        { type: "series" },
        { type: "chart" },
        { type: "horizontalAxis", isOpen: true },
        { type: "verticalAxis" },
      ],
    },
  },
  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: "groupedColumn",
  });
}

// Initialise the grid once the DOM is fully loaded
gridApi = createGrid(
  document.querySelector<HTMLElement>("#myGrid")!,
  gridOptions,
);
```

[Live example: Customize Tool Panel Customisation](https://www.ag-grid.com/examples/integrated-charts-chart-tool-panels/format-panel-customisation/typescript)

## Omitting & Ordering Tool Panels

The Chart Tool Panels can be omitted and ordered using the `chartToolPanelsDef.panels` grid option:

```js
const gridOptions = {
    chartToolPanelsDef: {
        panels: ['data', 'format', 'settings'], // default order
    },

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

To hide the Chart Tool Panels, the `chartToolPanelsDef.panels` grid option can be set to an empty array:

```js
const gridOptions = {
    chartToolPanelsDef: {
        panels: [], // No Chart Tool Panels are shown and Edit Chart is removed from the Chart Menu
    },

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

The following example shows how the Chart Tool Panels can be omitted and ordered. Note the following:

- The **Customize** Tool Panel has been omitted.
- The **Set Up** Tool Panel appears before the **Chart** Tool Panel.
- The Set Up Panel is configured to be open by default via `defaultToolPanel: 'data'`.

#### Omitting & Ordering Tool Panels

```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", chartDataType: "category", width: 150 },
    { field: "gold", chartDataType: "series" },
    { field: "silver", chartDataType: "series" },
    { field: "bronze", chartDataType: "series" },
  ],
  defaultColDef: { flex: 1 },
  cellSelection: true,
  popupParent: document.body,
  enableCharts: true,
  chartToolPanelsDef: {
    defaultToolPanel: "data",
    panels: ["data", "settings"],
  },
  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: "groupedColumn",
  });
}

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

[Live example: Omitting & Ordering Tool Panels](https://www.ag-grid.com/examples/integrated-charts-chart-tool-panels/omitting-ordering-tool-panels/typescript)

## Chart Tool Panel API

The Chart Tool Panels can be opened and closed programmatically using the following grid APIs:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `openChartToolPanel` | `Function` |  |  | Open the Chart Tool Panel. Module: [`IntegratedChartsModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |
| `closeChartToolPanel` | `Function` |  |  | Close the Chart Tool Panel. Module: [`IntegratedChartsModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |

The example below demonstrates how you can open and close the Chart Tool Panels.

- Click **Open Chart Tool Panel** to open the default `Chart` tab via `openChartToolPanel()`
- Click **Open Chart Tool Panel Customize tab** to open the `Customize` tab via `openChartToolPanel()`
- Click **Close Chart Tool Panel** to close via `closeChartToolPanel()`

#### Open/Close Chart Tool Panel

```ts
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  ChartCreatedEvent,
  ChartToolPanelName,
  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 chartId: string | undefined;

const gridOptions: GridOptions = {
  columnDefs: [
    { field: "country", chartDataType: "category" },
    { field: "sugar", chartDataType: "series" },
    { field: "fat", chartDataType: "series" },
    { field: "weight", chartDataType: "series" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  enableCharts: true,
  cellSelection: true,
  popupParent: document.body,
  onGridReady: (params: GridReadyEvent) => {
    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  },
  onFirstDataRendered,
  onChartCreated,
};

function onFirstDataRendered(params: FirstDataRenderedEvent) {
  params.api.createRangeChart({
    chartContainer: document.querySelector("#myChart") as HTMLElement,
    cellRange: {
      columns: ["country", "sugar", "fat", "weight"],
    },
    chartType: "groupedColumn",
  });
}

function onChartCreated(event: ChartCreatedEvent) {
  chartId = event.chartId;
}

function openChartToolPanel(panel?: ChartToolPanelName) {
  if (!chartId || !gridApi) return;
  gridApi.openChartToolPanel({
    chartId,
    panel,
  });
}

function closeChartToolPanel() {
  if (!chartId || !gridApi) return;
  gridApi.closeChartToolPanel({ chartId });
}

// Initialise the grid after the DOM is fully loaded
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).openChartToolPanel = openChartToolPanel;
  (<any>window).closeChartToolPanel = closeChartToolPanel;
}
```

[Live example: Open/Close Chart Tool Panel](https://www.ag-grid.com/examples/integrated-charts-chart-tool-panels/chart-tool-panel-api/typescript)