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'}`) }
],
extraLegendItemActions: [
{ label: 'Say hello to a legend item', action: ({ itemId }) => window.alert(`Hello ${itemId ?? 'world'}`) }
],
}