Highcharts 在鼠标悬停在图表线上时显示/突出显示 y 轴

Question

I have a complex chart with many y-Axis (>8) which results in not the best ux. Per y-Axis multiple graph lines may be plottet.

I think the following may improve this.

• up to eg for y-Axis on mouseover graph line highlight the corresponding y-Axis.
• for more than 4 y-Axis show only one y-Axis and on mouseover a graph line show the corresponding y-Axis.

Is there any setting or plugin available providing such or similar behavior which I oversaw?

How can I get from a mouseover over a graph line the corresponding y-Axis? (And what's the proper way for a rendered graph to hide y-Axis and show another one?)

Thx for sharing your expertise, I really appreciate.

Answer 1

You can use mouseOver and mouseOut events to highlight or show/hide the corresponding y-Axis. For example:

plotOptions: {
  series: {
    events: {
      mouseOver: function() {
        this.yAxis.update({
          labels: {
            style: {
              color: 'red'
            }
          }
        });
      },

      mouseOut: function() {
        this.yAxis.update({
          labels: {
            style: {
              color: '#666666'
            }
          }
        });
      }
    }
  }
}

---

Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4898/

API Reference:

https://api.highcharts.com/highcharts/plotOptions.series.events

https://api.highcharts.com/class-reference/Highcharts.Axis#update