javascripthighcharts

How can I apply hover to one bar only in a series created by Highcharts?


Code

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },
    plotOptions: {
        series: {
            grouping: true
        }
    },
    series: [
        {
            "name": "Anna",
            "data": [
                {
                    "y": 100
                },
                {
                    "y": 100
                },
                {
                    "y": 100
                }
            ],
            "color": "#5B5BD7",
            "borderWidth": 1
        },
        {
            "name": "Billy",
            "data": [
                {
                    "y": 125
                },
                {
                    "y": 125
                },
                {
                    "y": 125
                }
            ],
            "color": "#FD8D62",
            "borderWidth": 1
        }
    ]
});

Expected
Only the leftmost bar in January has the hover effect applied.

Actual
The leftmost bars in each of the months have the hover effect applied. enter image description here

I have tried a number of variations to configure this correctly, all to no avail.

JSFiddle


Solution

  • You want to use this api option in your series config: https://api.highcharts.com/highcharts/series.column.inactiveOtherPoints
    As stated in the documentation, this option achieves exactly what you want: "Highlight only the hovered point and fade the remaining points."