How to add mouseover eventlistener to xAxis area of Highcharts?-CodePudding

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>

CodePudding user response：

You can set pointer-events: bounding-box style of the .highcharts-xaxis-labels CSS class:

.highcharts-xaxis-labels {
  pointer-events: bounding-box;
}

Live demo: https://jsfiddle.net/BlackLabel/bmykcLew/

Useful thread: jQuery click isn't triggered on SVG <g> but on child elements

CodePudding user response：

I believe it would not be possible unless we have a new <rect> with a new className such as .highcharts-xaxis-box which will also allow to style this area rather than only the labels (similar to what Highcharts has for Legend).

I will ask for a new feature https://github.com/highcharts/highcharts/issues/18082