Vue ChartsContext Menu

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

In this example:

• Right clicking anywhere on the chart show 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.

contextMenu: {
    enabled: false,
}

Custom Actions

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

contextMenu: {
    extraActions: [
        { label: 'Say hello', action: () => window.alert('Hello world') },
    ],
    extraSeriesAreaActions: [
        { label: 'Say hello in the series area', action: () => window.alert('Hello in the series area!') },
    ],
    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'}`) }
    ],
}

In this configuration:

• A single additional action is added for the entire chart, the series area, the series node and the legend items. Multiple actions per item 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 show an alert box, displaying information to demonstrate that the action is aware of details about the right-clicked item.

API Reference