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.
I have tried a number of variations to configure this correctly, all to no avail.
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."