bonquiqui
Posts: 2
Joined: Mon Aug 08, 2022 6:34 pm

Finding the index at the series level for columns

Hi,

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
                  })
              })
            })
          }
        }
    }
  },
  
We get the correct points.index but no way to indicate what the hoveredPointIndex is.

Thanks for your response.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Finding the index at the series level for columns

Hello,

Welcome to our forum and thank you for contacting us with your question.

Applying opacity to other currently not hovered series is a default Highcharts behavior.
You can observe it here: https://jsfiddle.net/BlackLabel/sq0mog3w/

In the demo below, you can see how to get the hovered series index and hovered point index. You can use those indexes later to reference a specific point in the data array or a series in the series array.

Basically, you need to listen for events on point level, not on series - if you want to get hovered point info.

DEMO: https://jsfiddle.net/BlackLabel/yv72waeu/

Getting the hovered point info: https://jsfiddle.net/BlackLabel/5aocyfqe/

Let me know if that's what you were looking for,
Best regards!
Kamil Musiałowski
Highcharts Developer
bonquiqui
Posts: 2
Joined: Mon Aug 08, 2022 6:34 pm

Re: Finding the index at the series level for columns

Hi Kamil,

Thank you for your quick response. We want to only highlight the bars for a group. For example, you provided me with the default behavior that would highlight all the greens if selected. We want only the blue, black and green for section 2 to be highlighted if that was where the mouseOver event happened. That is why we were at the series level. But we need a way to know that the group of bars have been highlighted. In the code I provided you it only highlights the bars located at 0 and 1 index because there isn't a way to indicate the other bars on the chart.

So we want to hover over the group of bars and then the other bars have opacity applied. Very similar to this: https://www.highcharts.com/demo/column-basic how the crosshair is highlighting the group but we want everything else to have opacity when not hovered.

Thanks.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Finding the index at the series level for columns

Hi there,

I'm sorry but I think I've attached two exact same demos.
Please take a look at the link below, that's what I meant to send you:
https://jsfiddle.net/BlackLabel/5aocyfqe/

Sorry for that!

In the meantime, I'll work on a solution for you.
Regards!
Kamil Musiałowski
Highcharts Developer
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Finding the index at the series level for columns

I think now I know what you wanted to achieve. Have a look at the demo posted below, and let me know what you think about it.

DEMO: https://jsfiddle.net/BlackLabel/ypno5t0g/

Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”