Currently I am trying to use the mouseOver and mouseOut event for the column chart. The idea is that we want to be able to hover over a group of columns and then opacity would be applied to all of the other series. Unfortunately, the way it is currently structured. We are not able to indicate which series was hovered. So right now we have the series index which is returning 0 or 1. So it highlights the two first series in the array depending on which column we hover over. At the point level you are able to highlight that specific point and apply opacity to all the related columns. But we want to highlight the grouped series of bars and then apply opacity to the rest of them.
This is the current mouseOver and mouseOut function:
Code: Select all
plotOptions: {
series: {
events: {
mouseOver(event: any) {
let hoveredPointIndex = (this as any).points;
(this as any).chart.series.forEach(function (seriesObject: any) {
seriesObject.points.forEach(function(points: any){
if (points.index !== hoveredPointIndex)
points.update({
opacity: 0.4
})
})
})
},
mouseOut(event: any) {
let hoveredPointIndex = (this as any).points;
(this as any).chart.series.forEach(function (seriesObject: any) {
seriesObject.points.forEach(function(points: any){
if (points.index !== hoveredPointIndex)
points.update({
opacity: 1
})
})
})
}
}
}
},
Thanks for your response.