---
title: "Chart Menu"
enterprise: true
framework: react
version: "36.1.0"
---

# Chart Menu

The Chart Menu appears in the top-right corner of the chart. The Chart Menu provides options to edit the chart, as well as actions such as unlinking the chart from the grid, and downloading the current chart.

#### Chart Menu

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  useEffect,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  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();
}

const modules = [
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
];

const GridExample = () => {
  const gridRef = useRef<AgGridReact>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>();
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "country", width: 150, chartDataType: "category" },
    { field: "gold", chartDataType: "series" },
    { field: "silver", chartDataType: "series" },
    { field: "bronze", chartDataType: "series" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return { flex: 1 };
  }, []);
  const popupParent = useMemo<HTMLElement | null>(() => {
    return document.body;
  }, []);

  const onGridReady = useCallback((params: GridReadyEvent) => {
    getData().then((rowData) => setRowData(rowData));
  }, []);

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

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact
            ref={gridRef}
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            cellSelection={true}
            popupParent={popupParent}
            enableCharts={true}
            onGridReady={onGridReady}
            onFirstDataRendered={onFirstDataRendered}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Chart Menu](https://www.ag-grid.com/examples/integrated-charts-menu/menu/reactFunctionalTs)

## Default Chart Menu Items

The following items are displayed within the Chart Menu by default:

- **Edit Chart** (`'chartEdit'`) - Displays the [Chart Tool Panels](https://www.ag-grid.com/react-data-grid/integrated-charts-chart-tool-panels/), which allow users to change the selected chart type, and customise the data and chart formatting.
- **Advanced Settings** (`'chartAdvancedSettings'`) - Displays a modal containing interactivity settings for the chart. Note that this is only displayed when using AG Charts Enterprise.
- **Link to Grid** (`'chartLink'`) / **Unlink from Grid** (`'chartUnlink'`) - Charts are linked to the data in the grid by default, so that if the data changes, the chart will also update. However, it is sometimes desirable to unlink a chart from the grid data. For instance, users may want to prevent a chart from being updated when subsequent sorts and filters are applied in the grid. Note that the chart range disappears from the grid when the chart has been unlinked.
- **Download Chart** (`'chartDownload'`) - Downloads the chart as a `PNG` file. Note that the chart is drawn using Canvas in the browser, and as such the user can also right click on the chart and save just like any other image on a web page. The chart can also be [downloaded using the Grid API](https://www.ag-grid.com/react-data-grid/integrated-charts-api-downloading-image/).

## Customising the Chart Menu Items

The Chart Menu list can be customised via the grid option `chartMenuItems`. This can either be a list of menu items, or a callback which is passed the list of default menu items.

The menu item list should be a list with each item either a) a `DefaultChartMenuItem` string or b) a `MenuItemDef`. Use `DefaultChartMenuItem` to pick from the built-in menu items (listed above) and use `MenuItemDef` for your own menu items.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `chartMenuItems` | `(DefaultChartMenuItem \| MenuItemDef)[] \| GetChartMenuItems` |  |  | Get chart menu items. Only applies when using AG Charts Enterprise. Module: [`IntegratedChartsModule`](https://www.ag-grid.com/react-data-grid/modules/). |

The following example demonstrates hiding the Edit Chart and Advanced Settings menu items, and adding a custom menu item that uses the `chartId` to close the chart:

#### Customising the Chart Menu Items

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  useEffect,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  DefaultChartMenuItem,
  FirstDataRenderedEvent,
  GetChartMenuItems,
  GetChartMenuItemsParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  MenuItemDef,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
} from "ag-grid-enterprise";
import { getData } from "./data";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
];

const GridExample = () => {
  const gridRef = useRef<AgGridReact>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>();
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "country", width: 150, chartDataType: "category" },
    { field: "gold", chartDataType: "series" },
    { field: "silver", chartDataType: "series" },
    { field: "bronze", chartDataType: "series" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return { flex: 1 };
  }, []);
  const popupParent = useMemo<HTMLElement | null>(() => {
    return document.body;
  }, []);

  const onGridReady = useCallback((params: GridReadyEvent) => {
    getData().then((rowData) => setRowData(rowData));
  }, []);

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

  const chartMenuItems = useCallback(
    (
      params: GetChartMenuItemsParams,
    ): (DefaultChartMenuItem | MenuItemDef)[] => {
      // Remove edit chart and advanced settings.
      // `defaultItems` will automatically update the link/unlink options based on the current state.
      const items: (DefaultChartMenuItem | MenuItemDef)[] =
        params.defaultItems.filter((item: string) => {
          return item !== "chartEdit" && item !== "chartAdvancedSettings";
        });
      items.push({
        name: "Close Chart",
        action: () => {
          params.api.getChartRef(params.chartId)?.destroyChart();
        },
      });
      return items;
    },
    [],
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact
            ref={gridRef}
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            cellSelection={true}
            popupParent={popupParent}
            enableCharts={true}
            chartMenuItems={chartMenuItems}
            onGridReady={onGridReady}
            onFirstDataRendered={onFirstDataRendered}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Customising the Chart Menu Items](https://www.ag-grid.com/examples/integrated-charts-menu/menu-customisation/reactFunctionalTs)

## Hiding the Chart Menu

The Chart Menu can be hidden by returning an empty array from the `getChartToolbarItems()` grid callback:

```jsx
const getChartToolbarItems = () => [];

<AgGridReact getChartToolbarItems={getChartToolbarItems} />
```