---
title: "Chart Tool Panels"
enterprise: true
framework: vue
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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :cellSelection="true"
      :popupParent="popupParent"
      :enableCharts="true"
      :chartToolPanelsDef="chartToolPanelsDef"
      :rowData="rowData"
      @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", chartDataType: "category", width: 150 },
      { field: "gold", chartDataType: "series" },
      { field: "silver", chartDataType: "series" },
      { field: "bronze", chartDataType: "series" },
    ]);
    const defaultColDef = ref<ColDef>({ flex: 1 });
    const popupParent = ref<HTMLElement | null>(document.body);
    const chartToolPanelsDef = ref<ChartToolPanelsDef>({
      defaultToolPanel: "settings",
    });
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      params.api.createRangeChart({
        cellRange: {
          rowStartIndex: 0,
          rowEndIndex: 4,
          columns: ["country", "gold", "silver", "bronze"],
        },
        chartType: "groupedColumn",
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      getData().then((rowData) => params.api.setGridOption("rowData", rowData));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      chartToolPanelsDef,
      rowData,
      onGridReady,
      onFirstDataRendered,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

The Chart Tool Panels are accessed by selecting `Edit Chart` from the [Chart Menu](https://www.ag-grid.com/vue-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/vue-data-grid/modules/). [Initial](https://www.ag-grid.com/vue-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/vue-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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      id="myGrid"
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :cellSelection="true"
      :popupParent="popupParent"
      :enableCharts="true"
      :chartToolPanelsDef="chartToolPanelsDef"
      :rowData="rowData"
      @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", chartDataType: "category", width: 150 },
      { field: "gold", chartDataType: "series" },
      { field: "silver", chartDataType: "series" },
      { field: "bronze", chartDataType: "series" },
    ]);
    const defaultColDef = ref<ColDef>({ flex: 1 });
    const popupParent = ref<HTMLElement | null>(document.body);
    const chartToolPanelsDef = ref<ChartToolPanelsDef>({
      defaultToolPanel: "settings",
      settingsPanel: {
        chartGroupsDef: {
          pieGroup: ["donut", "pie"],
          columnGroup: ["stackedColumn", "column", "normalizedColumn"],
          barGroup: ["bar"],
        },
      },
    });
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      params.api.createRangeChart({
        cellRange: {
          rowStartIndex: 0,
          rowEndIndex: 4,
          columns: ["country", "gold", "silver", "bronze"],
        },
        chartType: "groupedColumn",
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      getData().then((rowData) => params.api.setGridOption("rowData", rowData));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      chartToolPanelsDef,
      rowData,
      onGridReady,
      onFirstDataRendered,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## 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/vue-data-grid/modules/). [Initial](https://www.ag-grid.com/vue-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
<ag-grid-vue
    :chartToolPanelsDef="chartToolPanelsDef"
    /* other grid options ... */>
</ag-grid-vue>

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/vue-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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :cellSelection="true"
      :popupParent="popupParent"
      :enableCharts="true"
      :chartToolPanelsDef="chartToolPanelsDef"
      :rowData="rowData"
      @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", chartDataType: "category", width: 150 },
      { field: "gold", chartDataType: "series" },
      { field: "silver", chartDataType: "series" },
      { field: "bronze", chartDataType: "series" },
    ]);
    const defaultColDef = ref<ColDef>({ flex: 1 });
    const popupParent = ref<HTMLElement | null>(document.body);
    const chartToolPanelsDef = ref<ChartToolPanelsDef>({
      defaultToolPanel: "data",
      dataPanel: {
        groups: [
          { type: "seriesChartType", isOpen: true },
          { type: "series", isOpen: false },
        ],
      },
    });
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      params.api.createRangeChart({
        cellRange: {
          rowStartIndex: 0,
          rowEndIndex: 4,
          columns: ["country", "gold", "silver", "bronze"],
        },
        chartType: "groupedColumn",
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      getData().then((rowData) => params.api.setGridOption("rowData", rowData));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      chartToolPanelsDef,
      rowData,
      onGridReady,
      onFirstDataRendered,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## 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/vue-data-grid/modules/). [Initial](https://www.ag-grid.com/vue-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
<ag-grid-vue
    :chartToolPanelsDef="chartToolPanelsDef"
    /* other grid options ... */>
</ag-grid-vue>

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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :popupParent="popupParent"
      :cellSelection="true"
      :enableCharts="true"
      :chartToolPanelsDef="chartToolPanelsDef"
      :rowData="rowData"
      @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", width: 150, chartDataType: "category" },
      { field: "gold", chartDataType: "series" },
      { field: "silver", chartDataType: "series" },
      { field: "bronze", chartDataType: "series" },
    ]);
    const defaultColDef = ref<ColDef>({ flex: 1 });
    const popupParent = ref<HTMLElement | null>(document.body);
    const chartToolPanelsDef = ref<ChartToolPanelsDef>({
      defaultToolPanel: "format",
      formatPanel: {
        groups: [
          { type: "series" },
          { type: "chart" },
          { type: "horizontalAxis", isOpen: true },
          { type: "verticalAxis" },
        ],
      },
    });
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      params.api.createRangeChart({
        cellRange: {
          rowStartIndex: 0,
          rowEndIndex: 4,
          columns: ["country", "gold", "silver", "bronze"],
        },
        chartType: "groupedColumn",
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      getData().then((rowData) => params.api.setGridOption("rowData", rowData));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      chartToolPanelsDef,
      rowData,
      onGridReady,
      onFirstDataRendered,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## Omitting & Ordering Tool Panels

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

```ts
<ag-grid-vue
    :chartToolPanelsDef="chartToolPanelsDef"
    /* other grid options ... */>
</ag-grid-vue>

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
<ag-grid-vue
    :chartToolPanelsDef="chartToolPanelsDef"
    /* other grid options ... */>
</ag-grid-vue>

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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :cellSelection="true"
      :popupParent="popupParent"
      :enableCharts="true"
      :chartToolPanelsDef="chartToolPanelsDef"
      :rowData="rowData"
      @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", chartDataType: "category", width: 150 },
      { field: "gold", chartDataType: "series" },
      { field: "silver", chartDataType: "series" },
      { field: "bronze", chartDataType: "series" },
    ]);
    const defaultColDef = ref<ColDef>({ flex: 1 });
    const popupParent = ref<HTMLElement | null>(document.body);
    const chartToolPanelsDef = ref<ChartToolPanelsDef>({
      defaultToolPanel: "data",
      panels: ["data", "settings"],
    });
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      params.api.createRangeChart({
        cellRange: {
          rowStartIndex: 0,
          rowEndIndex: 4,
          columns: ["country", "gold", "silver", "bronze"],
        },
        chartType: "groupedColumn",
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      getData().then((rowData) => params.api.setGridOption("rowData", rowData));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      chartToolPanelsDef,
      rowData,
      onGridReady,
      onFirstDataRendered,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## 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/vue-data-grid/modules/). |
| `closeChartToolPanel` | `Function` |  |  | Close the Chart Tool Panel. Module: [`IntegratedChartsModule`](https://www.ag-grid.com/vue-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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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,
]);

let chartId: string | undefined;

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="wrapper">
      <div id="buttons">
        <button v-on:click="openChartToolPanel(undefined)">Open Chart Tool Panel</button>
        <button v-on:click="openChartToolPanel('format')">Open Chart Tool Panel Customize tab</button>
        <button v-on:click="closeChartToolPanel()">Close Chart Tool Panel</button>
      </div>
      <div id="contents">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :defaultColDef="defaultColDef"
          :enableCharts="true"
          :cellSelection="true"
          :popupParent="popupParent"
          :rowData="rowData"
          @first-data-rendered="onFirstDataRendered"
          @chart-created="onChartCreated"></ag-grid-vue>
          <div id="myChart" class="my-chart"></div>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", chartDataType: "category" },
      { field: "sugar", chartDataType: "series" },
      { field: "fat", chartDataType: "series" },
      { field: "weight", chartDataType: "series" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const popupParent = ref<HTMLElement | null>(document.body);
    const rowData = ref<any[]>(null);

    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.value) return;
      gridApi.value.openChartToolPanel({
        chartId,
        panel,
      });
    }
    function closeChartToolPanel() {
      if (!chartId || !gridApi.value) return;
      gridApi.value.closeChartToolPanel({ chartId });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      getData().then((rowData) => params.api.setGridOption("rowData", rowData));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      rowData,
      onGridReady,
      onFirstDataRendered,
      onChartCreated,
      openChartToolPanel,
      closeChartToolPanel,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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