1

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>
Sima
  • 13
  • 4
  • Welcome to SO! Thanks for contributing. Could you please take a moment to [convert your jsfiddle link to "Stack Snippet"](https://meta.stackoverflow.com/q/358992/11107541) if possible? – starball Dec 02 '22 at 23:19

2 Answers2

0

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

Sima
  • 13
  • 4
0

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

ppotaczek
  • 36,341
  • 2
  • 14
  • 24