---
title: "Context Menu"
enterprise: true
framework: angular
version: "14.1.0"
---

# Context Menu

The Context Menu provides context-aware interactions with the chart elements.

#### Context Menu

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Context Menu](https://www.ag-grid.com/charts/angular/context-menu/examples/context-menu)

In this example:

- Right clicking anywhere on the chart shows the Context Menu with the option to download the chart.
- Right clicking on a legend item will show the Context Menu with additional options to toggle series visibility.

The Context Menu is enabled by default, to disable set `contextMenu.enabled` to `false`.

```js
{
    contextMenu: {
        enabled: false,
    },
}
```

## Built-in Items

The Context Menu displays default items based on the right-clicked element.

The `contextMenu.items` array accepts special string values to conveniently reconfigure these defaults.

#### Context Menu Built-in Items

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Context Menu Built-in Items](https://www.ag-grid.com/charts/angular/context-menu/examples/context-menu-builtins)

```js
{
    contextMenu: {
        items: [
            'defaults', //all the default menu-items in the pre-determined order.
            'separator', // a non-interactive horizontal line.
            'toggle-series-visibility', // used for legend items.
            'toggle-other-series', // used for legend items in multi-series charts.
            'zoom-to-cursor', // used with zoom.
            'pan-to-cursor', // used with zoom.
            'reset-zoom', // used with zoom.
            'download',
        ],
    },
}
```

In this example:

- The "Custom Order" button reorders the default built-in Menu Items and adds separators.
- The "Default Order" button resets the Menu Items to the default `['defaults']` value.

These string values can be used in combination with [Custom Actions](#custom-actions).

## Custom Actions

The Context Menu's custom actions can be used to run arbitrary functions based on the element that is right-clicked.

#### Context Menu Custom Actions

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Context Menu Custom Actions](https://www.ag-grid.com/charts/angular/context-menu/examples/context-menu-actions)

Use the `showOn` property to specify when a custom item should be shown:

- `always` - shown regardless of what was clicked.
- `axis` - shown when right-clicking an axis.
- `caption` - shown when right-clicking a caption (title, subtitle, footnote).
- `cross-line` - shown when right-clicking a [Cross Line's](https://www.ag-grid.com/charts/angular/axes-cross-lines/) line or fill.
- `series-area` - shown when right-clicking anywhere within the series area bounds.
- `series-node` - shown when right-clicking a datum node.
- `legend-item` - shown when right-clicking a legend item.

If there are multiple elements that match the `showOn` value, all of them are shown in the Context Menu.

```js
{
    contextMenu: {
        items: [
            'defaults',
            'separator',
            {
                showOn: 'always',
                label: 'Say hello',
                action: () => console.log('Hello world!'),
            },
            'separator',
            {
                showOn: 'axis',
                label: 'Say hello to an axis',
                action: (ev) => console.log(`Hello in axis "${ev.axisId}":"`, ev),
            },
            {
                showOn: 'series-area',
                label: 'Say hello in the series area',
                action: () => console.log('Hello in the series area!'),
            },
            'separator',
            {
                showOn: 'series-node',
                label: 'Say hello to a node',
                action: ({ datum, yKey }) => console.log(`Hello ${yKey} in ${datum.month}!`),
            },
            //...more custom actions for legend items, captions, etc.
        ],
    },
}
```

In this configuration:

- A single custom action is added for the entire chart, the captions, the axes, the series area, the series node and the legend items.
- Multiple entries per `showOn` element can be specified within the array if required.
- Right clicking on one of these areas will show these additional actions in the Context Menu.
- Clicking these extra actions will display information in the console, demonstrating that the action is aware of details about the right-clicked item.

## Sub-Menus

To add Sub-Menus to the Context Menu, simply use the `items` property recursively.

#### Context Menu Sub-Menus

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Context Menu Sub-Menus](https://www.ag-grid.com/charts/angular/context-menu/examples/context-menu-submenus)

```js
{
    contextMenu: {
        items: [
            'download',
            {
                showOn: 'series-area',
                label: 'Zoom Controls',
                items: ['zoom-to-cursor', 'pan-to-cursor', 'reset-zoom'],
            },
            {
                showOn: 'legend-item',
                label: 'Legend Controls',
                items: ['toggle-series-visibility', 'toggle-other-series'],
            },
            'separator',
            {
                label: 'Debug Console',
                items: [
                    {
                        showOn: 'always',
                        label: `On 'always'`,
                        action: () => console.log(`On 'always' clicked.`),
                    },
                    {
                        showOn: 'axis',
                        label: `On 'axis'`,
                        action: (ev) => console.log(`On 'axis' clicked -`, ev.axisId, ev),
                    },
                    {
                        showOn: 'caption',
                        label: `On 'caption'`,
                        action: ({ captionType, text }) =>
                            console.log(`On 'caption' clicked -`, captionType, text),
                    },
                    {
                        showOn: 'series-area',
                        label: `On 'series-area'`,
                        action: () => console.log(`On 'series-area' clicked.`),
                    },
                    {
                        showOn: 'series-node',
                        label: `On 'series-node'`,
                        action: ({ datum, xKey, yKey }) =>
                            console.log(`On 'series-node' clicked -`, yKey, datum[xKey], datum[yKey]),
                    },
                    {
                        showOn: 'legend-item',
                        label: `On 'legend-item'`,
                        action: ({ itemId }) => console.log(`On 'legend-item' clicked -`, itemId),
                    },
                ],
            },
        ],
    },
}
```

In this configuration:

- The built-in Zoom and Legend menu items are placed into Sub-Menus.
- An additional "Debug Console" Sub-Menu is added with custom actions to log events to the console.

## Dynamic Items

The `getItems` callback can be used to implement Dynamic Context Menus. This is typically used to write Menu Items that depend on underlying state or data in some way.

#### Dynamic Context Menu

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Dynamic Context Menu](https://www.ag-grid.com/charts/angular/context-menu/examples/dynamic-context-menu)

```js
{
    contextMenu: {
        getItems: (params) => {
            if (params.showOn === 'series-node') {
                const xName = params.datum[params.xKey];
                return [
                    'defaults',
                    'separator',
                    // Dynamic Context Menu Item
                    {
                        type: 'action',
                        showOn: 'series-node',
                        label: `Log Datum "${params.seriesId} - ${xName}"`,
                        action: () => console.log(params.datum),
                    },
                ];
            }
        },
    },
}
```

In this example:

- The Context Menu on Bar Nodes includes a console `Log Datum` Menu Item, whose text is dynamically derived from the Context Menu Event parameters.
- The `getItems` params includes a `showOn` property which indicates which element type was right-clicked, alongside relevant information about the clicked element.
- If there are multiple elements at the same click point, the `allShowOnParams` array on the `getItems` params provides the parameters for every element, not just the winning one.

### Example: Interactive Customisation

The `getItems` callback can be used to change the state or appearance of a data point or series.

#### Dynamic Context Menu Data

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Dynamic Context Menu Data](https://www.ag-grid.com/charts/angular/context-menu/examples/dynamic-context-menu-data)

```js
{
    contextMenu: {
        getItems: (params) => {
            if (params.showOn === 'series-node') {
                const { seriesId } = params;
                const year = String(params.datum[params.xKey]);
                const yKey = params.yKey;
                const isEmphasised = emphasisedPoints.has(pointKey(seriesId, year));
                return [
                    {
                        type: 'action',
                        showOn: 'series-node',
                        label: `${isEmphasised ? 'Remove Emphasis from' : 'Emphasise'} "${year}" Point`,
                        action: () => toggleEmphasis(seriesId, year),
                    },
                    {
                        type: 'action',
                        showOn: 'series-node',
                        label: `Remove "${year}" Point`,
                        action: () => removeDataPoint(year, yKey),
                    },
                ];
            }
            if (params.showOn === 'legend-item') {
                const { seriesId } = params;
                return [
                    'toggle-series-visibility',
                    {
                        type: 'action',
                        showOn: 'legend-item',
                        label: `Remove "${seriesId}"`,
                        action: () => removeSeries(seriesId),
                    },
                    // A submenu of colour options
                    {
                        showOn: 'legend-item',
                        label: `Colour "${seriesId}"`,
                        items: seriesColors.map((color) => ({
                            type: 'action',
                            showOn: 'legend-item',
                            label: color.label,
                            action: () => colorSeries(seriesId, color.value),
                        })),
                    },
                ];
            }
        },
    },
}
```

In this example, right-clicking a data point shows custom actions for that point:

- "Emphasise" enlarges the marker and displays the value; triggering it again removes the emphasis.
- "Remove Point" sets the point's value to `null`, leaving a gap in the line.

Right-clicking a legend item shows actions for the whole series:

- The built-in `toggle-series-visibility` item hides or shows the series.
- "Remove Series" drops the series.
- "Colour" is a submenu of preset colours; selecting one recolours the series' line and markers.

## API Reference

#### Context Menu

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| enabled | boolean | true | Whether to show the context menu. |
| items | AgContextMenuItem[] | ['defaults'] | List of menu items (and submenus) for the context menu. |
| getItems | AgContextMenuGetItemsCallback | undefined | Callback to list the menu items (and submenus) for the context menu. Overrides `items` if return-value is defined, otherwise `items` is used as a fallback. |

#### Always

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type | 'action' \| 'separator' | 'action' | The type of UI element that this item represents. |
| showOn | 'always' | 'always' | Which clicked element this menu item should be shown for. `'always'` menu items are always shown. |
| label (required) | string |  | The text label of this menu item. This property is required for Accessibility compliance. |
| action | Function |  | Function called when clicking on this menu item. |
| enabled | boolean | true | State of this menu-item. |
| items | AgContextMenuItem[] |  | The submenu items. If undefined or empty, then this item will just be treat like a regular menu item. Otherwise, this menu item will have a submenu popup attached to it. |

#### Axis

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type | 'action' \| 'separator' | 'action' | The type of UI element that this item represents. |
| showOn (required) | 'axis' | 'axis' | Which clicked element this menu item should be shown for. `'axis'` menu items are when clicking any part of an axis. |
| label (required) | string |  | The text label of this menu item. This property is required for Accessibility compliance. |
| action | Function |  | Function called when clicking on this menu item. |
| enabled | boolean | true | State of this menu-item. |
| items | AgContextMenuItem[] |  | The submenu items. If undefined or empty, then this item will just be treat like a regular menu item. Otherwise, this menu item will have a submenu popup attached to it. |

#### Caption

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type | 'action' \| 'separator' | 'action' | The type of UI element that this item represents. |
| showOn (required) | 'caption' | 'caption' | Which clicked element this menu item should be shown for. `'caption'` menu items are when clicking on a caption (title, subtitle, footnote). |
| label (required) | string |  | The text label of this menu item. This property is required for Accessibility compliance. |
| action | Function |  | Function called when clicking on this menu item. |
| enabled | boolean | true | State of this menu-item. |
| items | AgContextMenuItem[] |  | The submenu items. If undefined or empty, then this item will just be treat like a regular menu item. Otherwise, this menu item will have a submenu popup attached to it. |

#### Cross-Line

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type | 'action' \| 'separator' | 'action' | The type of UI element that this item represents. |
| showOn (required) | 'cross-line' |  | Which clicked element this menu item should be shown for. `'cross-line'` menu items are shown when right-clicking a cross line's line or fill. |
| label (required) | string |  | The text label of this menu item. This property is required for Accessibility compliance. |
| action | Function |  | Function called when clicking on this menu item. |
| enabled | boolean | true | State of this menu-item. |
| items | AgContextMenuItem[] |  | The submenu items. If undefined or empty, then this item will just be treat like a regular menu item. Otherwise, this menu item will have a submenu popup attached to it. |

#### Series-Area

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type | 'action' \| 'separator' | 'action' | The type of UI element that this item represents. |
| showOn (required) | 'series-area' |  | Which clicked element this menu item should be shown for. `'series-area'` menu items are shown when clicking anywhere within the series area bounds. |
| label (required) | string |  | The text label of this menu item. This property is required for Accessibility compliance. |
| action | Function |  | Function called when clicking on this menu item. |
| enabled | boolean | true | State of this menu-item. |
| items | AgContextMenuItem[] |  | The submenu items. If undefined or empty, then this item will just be treat like a regular menu item. Otherwise, this menu item will have a submenu popup attached to it. |

#### Series-Node

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type | 'action' \| 'separator' | 'action' | The type of UI element that this item represents. |
| showOn (required) | 'series-node' |  | Which clicked element this menu item should be shown for. `'series-node'` menu items are shown when clicking when clicking on a datum node. |
| label (required) | string |  | The text label of this menu item. This property is required for Accessibility compliance. |
| action | Function |  | Function called when clicking on this menu item. |
| enabled | boolean | true | State of this menu-item. |
| items | AgContextMenuItem[] |  | The submenu items. If undefined or empty, then this item will just be treat like a regular menu item. Otherwise, this menu item will have a submenu popup attached to it. |

#### Legend

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type | 'action' \| 'separator' | 'action' | The type of UI element that this item represents. |
| showOn (required) | 'legend-item' |  | Which clicked element this menu item should be shown for. `'legend-item'` menu items are shown when clicking on a legend item. |
| label (required) | string |  | The text label of this menu item. This property is required for Accessibility compliance. |
| action | Function |  | Function called when clicking on this menu item. |
| enabled | boolean | true | State of this menu-item. |
| items | AgContextMenuItem[] |  | The submenu items. If undefined or empty, then this item will just be treat like a regular menu item. Otherwise, this menu item will have a submenu popup attached to it. |