I am trying to add a click event to a plot line in Highcharts.
According to the documentation this should be possible. Slightly editing the example from the documentation, it does not work for the band (working of the provided example with a band here, but same outcome for plot lines).
const report = document.getElementById('report');
Highcharts.chart('container', {
xAxis: {
plotBands: [{ // mark the weekend
color: '#FCFFC5',
from: Date.UTC(2010, 0, 2),
to: Date.UTC(2010, 0, 4),
events: {
click: () => {
alert('Band click');
}
}
}],
tickInterval: 24 * 3600 * 1000,
// one day
type: 'datetime'
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000,
point: {
events: {
click: function () {
alert('Series click');
}
}
}
}]
});#container {
height: 300px;
}<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<div id="report"></div>The click on the series throws the alert as expected.
What am I doing wrong?