---
title: "Chart Tool Panels"
enterprise: true
framework: angular
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 { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
CellSelectionOptions,
ChartToolPanelsDef,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
FirstDataRenderedEvent,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
IntegratedChartsModule,
RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
IntegratedChartsModule.with(AgChartsEnterpriseModule),
ColumnMenuModule,
ContextMenuModule,
RowGroupingModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: ` `,
})
export class AppComponent {
columnDefs: ColDef[] = [
{ field: "country", chartDataType: "category", width: 150 },
{ field: "gold", chartDataType: "series" },
{ field: "silver", chartDataType: "series" },
{ field: "bronze", chartDataType: "series" },
];
defaultColDef: ColDef = { flex: 1 };
popupParent: HTMLElement | null = document.body;
chartToolPanelsDef: ChartToolPanelsDef = {
defaultToolPanel: "settings",
};
rowData!: any[];
onFirstDataRendered(params: FirstDataRenderedEvent) {
params.api.createRangeChart({
cellRange: {
rowStartIndex: 0,
rowEndIndex: 4,
columns: ["country", "gold", "silver", "bronze"],
},
chartType: "groupedColumn",
});
}
onGridReady(params: GridReadyEvent) {
getData().then((rowData) => params.api.setGridOption("rowData", rowData));
}
}
```
[Live example: Chart Tool Panels](https://www.ag-grid.com/examples/integrated-charts-chart-tool-panels/chart-tool-panels/angular)
The Chart Tool Panels are accessed by selecting `Edit Chart` from the [Chart Menu](https://www.ag-grid.com/angular-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 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/angular-data-grid/modules/). [Initial](https://www.ag-grid.com/angular-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/angular-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 { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
CellSelectionOptions,
ChartToolPanelsDef,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
FirstDataRenderedEvent,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
IntegratedChartsModule,
RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
IntegratedChartsModule.with(AgChartsEnterpriseModule),
ColumnMenuModule,
ContextMenuModule,
RowGroupingModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: ` `,
})
export class AppComponent {
columnDefs: ColDef[] = [
{ field: "country", chartDataType: "category", width: 150 },
{ field: "gold", chartDataType: "series" },
{ field: "silver", chartDataType: "series" },
{ field: "bronze", chartDataType: "series" },
];
defaultColDef: ColDef = { flex: 1 };
popupParent: HTMLElement | null = document.body;
chartToolPanelsDef: ChartToolPanelsDef = {
defaultToolPanel: "settings",
settingsPanel: {
chartGroupsDef: {
pieGroup: ["donut", "pie"],
columnGroup: ["stackedColumn", "column", "normalizedColumn"],
barGroup: ["bar"],
},
},
};
rowData!: any[];
onFirstDataRendered(params: FirstDataRenderedEvent) {
params.api.createRangeChart({
cellRange: {
rowStartIndex: 0,
rowEndIndex: 4,
columns: ["country", "gold", "silver", "bronze"],
},
chartType: "groupedColumn",
});
}
onGridReady(params: GridReadyEvent) {
getData().then((rowData) => params.api.setGridOption("rowData", rowData));
}
}
```
[Live example: Chart Tool Panel Customisation](https://www.ag-grid.com/examples/integrated-charts-chart-tool-panels/settings-panel-customisation/angular)
## 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
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/angular-data-grid/modules/). [Initial](https://www.ag-grid.com/angular-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:
```ts
this.chartToolPanelsDef = {
dataPanel: {
groups: [
{ type: 'categories', isOpen: true },
{ type: 'series', isOpen: true },
{ type: 'seriesChartType', isOpen: true }
]
}
};
```
> **Note**
>
> The `seriesChartType` group is only shown in [Combination Charts](https://www.ag-grid.com/angular-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 { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
CellSelectionOptions,
ChartToolPanelsDef,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
FirstDataRenderedEvent,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
IntegratedChartsModule,
RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
IntegratedChartsModule.with(AgChartsEnterpriseModule),
ColumnMenuModule,
ContextMenuModule,
RowGroupingModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: ` `,
})
export class AppComponent {
columnDefs: ColDef[] = [
{ field: "country", chartDataType: "category", width: 150 },
{ field: "gold", chartDataType: "series" },
{ field: "silver", chartDataType: "series" },
{ field: "bronze", chartDataType: "series" },
];
defaultColDef: ColDef = { flex: 1 };
popupParent: HTMLElement | null = document.body;
chartToolPanelsDef: ChartToolPanelsDef = {
defaultToolPanel: "data",
dataPanel: {
groups: [
{ type: "seriesChartType", isOpen: true },
{ type: "series", isOpen: false },
],
},
};
rowData!: any[];
onFirstDataRendered(params: FirstDataRenderedEvent) {
params.api.createRangeChart({
cellRange: {
rowStartIndex: 0,
rowEndIndex: 4,
columns: ["country", "gold", "silver", "bronze"],
},
chartType: "groupedColumn",
});
}
onGridReady(params: GridReadyEvent) {
getData().then((rowData) => params.api.setGridOption("rowData", rowData));
}
}
```
[Live example: Set Up Tool Panel Customisation](https://www.ag-grid.com/examples/integrated-charts-chart-tool-panels/data-panel-customisation/angular)
## Customize Tool Panel
The Customize Panel allows users to format the chart where the available formatting options differ between chart types.
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/angular-data-grid/modules/). [Initial](https://www.ag-grid.com/angular-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:
```ts
this.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 },
]
}
};
```
> **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 { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
CellSelectionOptions,
ChartToolPanelsDef,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
FirstDataRenderedEvent,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
IntegratedChartsModule,
RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
IntegratedChartsModule.with(AgChartsEnterpriseModule),
ColumnMenuModule,
ContextMenuModule,
RowGroupingModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: ` `,
})
export class AppComponent {
columnDefs: ColDef[] = [
{ field: "country", width: 150, chartDataType: "category" },
{ field: "gold", chartDataType: "series" },
{ field: "silver", chartDataType: "series" },
{ field: "bronze", chartDataType: "series" },
];
defaultColDef: ColDef = { flex: 1 };
popupParent: HTMLElement | null = document.body;
chartToolPanelsDef: ChartToolPanelsDef = {
defaultToolPanel: "format",
formatPanel: {
groups: [
{ type: "series" },
{ type: "chart" },
{ type: "horizontalAxis", isOpen: true },
{ type: "verticalAxis" },
],
},
};
rowData!: any[];
onFirstDataRendered(params: FirstDataRenderedEvent) {
params.api.createRangeChart({
cellRange: {
rowStartIndex: 0,
rowEndIndex: 4,
columns: ["country", "gold", "silver", "bronze"],
},
chartType: "groupedColumn",
});
}
onGridReady(params: GridReadyEvent) {
getData().then((rowData) => params.api.setGridOption("rowData", rowData));
}
}
```
[Live example: Customize Tool Panel Customisation](https://www.ag-grid.com/examples/integrated-charts-chart-tool-panels/format-panel-customisation/angular)
## Omitting & Ordering Tool Panels
The Chart Tool Panels can be omitted and ordered using the `chartToolPanelsDef.panels` grid option:
```ts
this.chartToolPanelsDef = {
panels: ['data', 'format', 'settings'], // default order
};
```
To hide the Chart Tool Panels, the `chartToolPanelsDef.panels` grid option can be set to an empty array:
```ts
this.chartToolPanelsDef = {
panels: [], // No Chart Tool Panels are shown and Edit Chart is removed from the Chart Menu
};
```
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 { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
CellSelectionOptions,
ChartToolPanelsDef,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
FirstDataRenderedEvent,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
IntegratedChartsModule,
RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
IntegratedChartsModule.with(AgChartsEnterpriseModule),
ColumnMenuModule,
ContextMenuModule,
RowGroupingModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: ` `,
})
export class AppComponent {
columnDefs: ColDef[] = [
{ field: "country", chartDataType: "category", width: 150 },
{ field: "gold", chartDataType: "series" },
{ field: "silver", chartDataType: "series" },
{ field: "bronze", chartDataType: "series" },
];
defaultColDef: ColDef = { flex: 1 };
popupParent: HTMLElement | null = document.body;
chartToolPanelsDef: ChartToolPanelsDef = {
defaultToolPanel: "data",
panels: ["data", "settings"],
};
rowData!: any[];
onFirstDataRendered(params: FirstDataRenderedEvent) {
params.api.createRangeChart({
cellRange: {
rowStartIndex: 0,
rowEndIndex: 4,
columns: ["country", "gold", "silver", "bronze"],
},
chartType: "groupedColumn",
});
}
onGridReady(params: GridReadyEvent) {
getData().then((rowData) => params.api.setGridOption("rowData", rowData));
}
}
```
[Live example: Omitting & Ordering Tool Panels](https://www.ag-grid.com/examples/integrated-charts-chart-tool-panels/omitting-ordering-tool-panels/angular)
## 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/angular-data-grid/modules/). |
| `closeChartToolPanel` | `Function` | | | Close the Chart Tool Panel. Module: [`IntegratedChartsModule`](https://www.ag-grid.com/angular-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 { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
CellSelectionOptions,
ChartCreatedEvent,
ChartToolPanelName,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
FirstDataRenderedEvent,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
IntegratedChartsModule,
RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
IntegratedChartsModule.with(AgChartsEnterpriseModule),
ColumnMenuModule,
ContextMenuModule,
RowGroupingModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: `