Plugin that allows you to add extra events, like double / right click on each chart element, for Highcharts.
npm install highcharts-custom-events
Custom Events is an official Black Label plugin for Highcharts, extending the charting library with DOM-like event binding (click, dblclick, contextmenu, etc.) for chart elements such as labels, titles, series, and crosshairs. The plugin is built as a separate add-on to the Highcharts library, owned and maintained by Highsoft AS.
This module is the result of our long-standing collaboration with Highsoft, where we’ve been a trusted partner since 2010 — helping build, maintain, and expand the Highcharts ecosystem. With custom events, you can easily create richer interactivity and deliver better user experiences, without relying on complex workarounds.
➖ Live demo
➖ GitHub repository
!Demo
---
---
| Custom Events Version | Highcharts Version |
| --------------------- | ------------------ |
| 4.0.0+ | >= 9.0.0 |
| 3.x.x | < 9.0.0 |
---
Install via NPM:
``bash`
npm install highcharts highcharts-custom-eventsor
yarn add highcharts highcharts-custom-eventsor
pnpm add highcharts highcharts-custom-events
Then import and initialize:
`js
import Highcharts from "highcharts";
import HighchartsCustomEvents from "highcharts-custom-events";
HighchartsCustomEvents(Highcharts);
`
Or include via a
`
---
Attach events in the same way you would with Highcharts’ built-in event handlers:
`js`
Highcharts.chart('container', {
xAxis: {
labels: {
events: {
click: function () {
console.log('Click on xAxis label');
},
dblclick: function () {
console.log('Double click on xAxis label');
},
contextmenu: function () {
console.log('Right click on xAxis label');
}
}
}
},
crosshair: {
enabled: true,
events: {
mouseover: function () {
console.log('Mouse over crosshair');
}
}
},
series: [{
data: [1, 2, 3, 4, 5]
}]
});
---
| Fires on click |
| dblclick | Fires on double click (desktop & mobile) |
| contextmenu | Fires on right click |
| mouseover | Fires when hovering over element |
| mouseout | Fires when leaving element |
| mousedown | Fires when mouse button pressed |
| mousemove | Fires when moving cursor over element |Supported Elements
| Element | Notes |
| ------------- | ------------------ |
| title | Chart title |
| subtitle | Chart subtitle |
| axis.labels | Axis labels |
| axis.title | Axis title |
| plotLines | Including labels |
| plotBands | Including labels |
| point | Single data point |
| series | Entire series |
| legend | Legend items |
| dataLabels | Series data labels |
| flags | Flags series |
| crosshair | Crosshairs |
---
Development Setup
If you want to work on this plugin locally:
1. Clone the repository
`bash
git clone https://github.com/blacklabel/custom_events.git
cd custom_events
`
2. Install dependencies
bash
npm install
or
yarn install
`
3. Start a local dev server
bash
npm start
`
This will launch a local server (via http-server or similar) and open the demo page in your browser.4. Build the plugin
bash
npm run build
`
The compiled file will be available in the dist/ folder.---
Using the Plugin Locally in index.html
After building, include the plugin file after Highcharts in your index.html:
html
Highcharts Custom Events - Local Dev
``---
At Black Label, we specialize in pushing the boundaries of data visualization. Over the past 15 years, we’ve worked with companies worldwide to build charting solutions that go beyond out-of-the-box libraries.
Highcharts is at the heart of much of our work, and this plugin grew directly out of real-world client needs:
- Adding native-like event handling to chart elements
- Enabling intuitive UX for interactive dashboards
- Simplifying complex customization by extending the Highcharts core in a seamless way
Custom Events is one of many plugins we’ve created to make Highcharts more flexible, more powerful, and more developer-friendly.
---
We’re a Krakow-based team of data visualization experts, working closely with Highsoft and the global Highcharts community since 2010. Our expertise spans plugins, extensions, custom dashboards, and full-scale dataviz applications.
Custom Events is just one of the many innovations we’ve open-sourced. Explore more on our GitHub profile, read insights on our Blog, or connect with us at tech@blacklabel.net to discuss how we can help bring your charts and dashboards to life.
➖ Learn more on our LinkedIn page.