React ChartsContext Menu

react logo

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