CODEWITHSUNDEEP
highchartsreact-highcharts
jasonB
jasonB

Reputation: 45

How to fade other yAxises in highchart when hover on marker?

If you hover on Short Term Fuel Trim, the other plot lines are faded. How can I apply the same effect to yAxis which will fade other yAxis except Short Term Fuel Trim

enter image description here

Upvotes: 1

Views: 220

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You can use the yAxis.update method in the series mouseOver and mouseOut events to change title and labels color.

    function updateYAxes(chart, exception, color) {
        chart.yAxis.forEach(function(axis) {
            if (axis !== exception) {
                axis.update({
                    labels: {
                        style: {
                            color
                        }
                    },
                    title: {
                        style: {
                            color
                        }
                    }
                }, false);
            }
        }, this);

        chart.redraw();
    }

    Highcharts.chart('container', {
        ...,
        plotOptions: {
            series: {
                events: {
                    mouseOver: function() {
                        updateYAxes(this.chart, this.yAxis, '#ededed');
                    },
                    mouseOut: function() {
                        updateYAxes(this.chart, this.yAxis, 'black');
                    }
                }
            }
        }
    });

Live demo: http://jsfiddle.net/BlackLabel/ju9g05xe/

API Reference:

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

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

Upvotes: 1

Related Questions