Go to project page to see this module in action: http://blacklabel.github.io/custom_events/
- Plugin requires the latest Highcharts (tested with 6.1.4)
-
Like any other Highcharts module (e.g. exporting), add
<script>tag pointing tocustom_events.jsbelow Highcharts script tag. -
For NPM users:
var Highcharts = require('highcharts'),
HighchartsCustomEvents = require('highcharts-custom-events')(Highcharts);
- For BOWER users:
bower install highcharts-custom-events
The latest code is available on github: https://github.com/blacklabel/custom_events/
It's quite simple and intuitive, just pass function as other events:
events: {
dblclick: function () {
$('#report').html('dbclick on xAxis label');
},
click: function () {
$('#report').html('click on xAxis label');
},
contextmenu: function () {
$('#report').html('context menu on xAxis label');
}
}
Crosshairs
crosshair: {
enabled: true,
events: {
dblclick: function () {
$('#report').html('dbclick on xAxis label');
},
click: function () {
$('#report').html('click on xAxis label');
},
contextmenu: function () {
$('#report').html('context menu on xAxis label');
}
}
}
- click
- double click (including mobile devices)
- right click (context menu)
- mouse over
- mouse out
- mouse down
- mouse move
- title
- subtitle
- axis labels
- axis title
- plotLines
- plotBands, including labels
- point
- series
- legend
- datalabels
- flags
- crosshairs
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent