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,
}
Built-in Items Copy Link
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.
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 Copy Link
The Context Menu's custom actions can be used to run arbitrary functions based on the element that is right-clicked.
Use the showOn property to specify when the action should be shown.
contextMenu: {
items: [
{
showOn: 'always',
label: 'Say hello',
action: () => log('Hello world!'),
},
{
showOn: 'series-area',
label: 'Say hello in the series area',
action: () => log('Hello in the series area!'),
},
{
showOn: 'series-node',
label: 'Say hello to a node',
action: ({ datum, yKey }) => console.log(`Hello ${yKey} in ${datum.month}!`),
},
{
showOn: 'legend-item',
label: 'Say hello to a legend item',
action: ({ itemId }) => console.log(`Hello ${itemId}!`),
},
],
}
In this configuration:
- A single custom 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 display information in the console, demonstrating that the action is aware of details about the right-clicked item.
Sub-Menus Copy Link
To add Sub-Menus to the Context Menu, simply use the items property recursively.
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: [
{
type: 'action',
showOn: 'always',
label: `On 'always'`,
action: () => console.log(`On 'always' clicked.`),
},
{
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.