Custom Context Menu Items in Highcharts
- Štěpán Vacek
Analytics
Available from version 14.0
Experimental Feature
This feature introduces a customizable context menu in Highcharts, enabling users to interact with charts and perform specific actions by clicking on data points. The context menu can include options such as context-links to other modules or dashboards. For example, a menu item might navigate to another Dashboard or LPG, with specific filter inputs derived from the selected data point, or link to a Quote with a list of SKUs as new Line Items.
Configuration Engineers (CE) can define and integrate new context menu items into charts, enabling tailored workflows based on chart outputs. The feature works in environments supporting the Highcharts API, such as Dashboards and Quote Headers, and integrates seamlessly with Highcharts' native drilldown functionality. If a drilldown is defined, it appears as the first menu option, labeled Drilldown by default, though this label can be customized by CEs.
This functionality enhances usability by combining drilldown features with tailored contextual actions, creating a powerful tool for interactive data exploration and navigation.
Configurable Actions
AppPages (Groovy API Docs)
Methods
Method | Description |
|---|---|
| Defines a set of Context Linking options in a menu that will appear when the user clicks in the chart. |
| Adds a menu item to the context menu. |
| Specifies the label for the menu item without providing any translation options. |
| Specifies the label for the drilldown menu item without providing any translation options. |
| Specifies the menu item's label in multiple languages so the application will show the one appropriate for the current user. .setLabelTranslations([
"": "Go to Customer Detail View", // by default, if no specific language is provided
"en": "Go to Customer Detail View",
"de": "Gehen Sie zur Customer Detail View"
]) |
| Specifies the drilldown menu item's label in multiple languages so the application will show the one appropriate for the current user. .setDrilldownLabelTranslations([
"": "Go to Customer Detail View", // by default, if no specific language is provided
"en": "Go to Customer Detail View",
"de": "Gehen Sie zur Customer Detail View"
]) |
| Specifies the explicit position of a menu item, such as 1, 2, 3, etc. |
| Return from on click point. |
| Specifies all the Context Linking properties, such as |
Highcharts Point
The Hicharts Point class in the Highcharts API represents individual data points in chart series. Each point contains properties such as x (the x-axis value), y (the y-axis value), and can include additional metadata like name, color, and custom data attributes.
For more information see Highcharts. Point (Highcharts API).
Implementation | Example |
|---|---|
targetPageInputs: [Customer : "{point.options.customerId}"] |
|
|
Examples
Example 1
This example shows how to configure the following custom actions:
Drilldown option
Static link to other Dashboard (Customer Insights - Customer Detail View)
Link to other Dashboard with a specific filter inputs (Customer Id)
Code
Example 2
This example shows how to configure the following custom actions:
Drilldown change options
Link to other Dashboard with a specific filter inputs derived from the selected data point
Code
Related content
Found an issue in documentation? Write to us.