React ChartsContext Menu
react logo
Enterprise

The context menu can be used to take less common and context-aware actions with the chart and nodes.

To enable these features, set contextMenu.enabled to true.

contextMenu: {
    enabled: true,
}

A user will now be able to use the context menu by right clicking anywhere on the chart, as in the following example.

Custom Actions

You can add extra actions to the context menu which can run any arbitrary function.

contextMenu: {
    extraActions: [
        { label: 'Say hello', action: () => window.alert('Hello world') },
    ],
    extraNodeActions: [
        { label: 'Say hello to a node', action: ({ datum }) => window.alert(`Hello ${datum?.month ?? 'world'}`) }
    ],
}

API Reference

Properties available on the AgContextMenuOptions interface.

enabled
Typeboolean
extraActions
TypeAgContextMenuAction[]
extraNodeActions
TypeAgContextMenuAction[]