I added mouseover eventlistener to .highcharts-xaxis-labels
class of Highcharts. However it console.log
only when mouseover on <text>
not the rest of .highcharts-xaxis-labels
class.
How can I add the eventlistener so that it console.log
on mouseover all over the .highcharts-xaxis-labels
class, not only on <text>
inside the class? That would be the <g>
with className .highcharts-xaxis-labels
.
live example: https://jsfiddle.net/simazargar/sv9e1g5x/9/
Highcharts.chart('container', {
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
}, chart => {
document.querySelector('.highcharts-xaxis-labels')
.addEventListener('mouseover', function(e) {
console.log('mouseover');
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>