How to add mouseover eventlistener to xAxis area of Highcharts?

Question

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>

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

Sima · Answer 1 · 2022-12-02T22:31:33.280

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

edited Dec 02 '22 at 22:31

answered Dec 02 '22 at 19:41

Sima

13
4

score 0 · Accepted Answer · answered Dec 05 '22 at 10:29

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

How to add mouseover eventlistener to xAxis area of Highcharts?

2 Answers2