loic.dekester
Posts: 3
Joined: Thu Jun 30, 2022 10:45 pm

Sankey Chart: Overriding hover effect

Hi,

I am working with a sankey chart to display people movements in-between areas:
https://jsfiddle.net/loicdekester/rvL5x3ay/

In this example you can see a representations of movements between a cellar, 1st and 2nd floor.

The default behavior of the hover is the following:
Hover over node: reduces opacity of the links that don't connect to the node and display a tooltip with the count of this node.
Hover over link: reduces opacity of all other links and display tooltip with the name of the 2 nodes linked with the count that flows from one link to the other.

I want this behavior but I want to override it in case of click event on a link
plotOptions.series.point.events.click => I made a custom event that will light up all the links between nodes that were taken by people in this link:

Code: Select all

function() {
	//I retrieve an array of link ids that were part of the people path named tempArray
	this.series.nodes.forEach(node => {
        	node.linksFrom.forEach(link => {
          		if (tempArray.includes(link.id)) {
            			link.setState("hover");
         		 } else {
            			link.setState("inactive");
         		 }
       		 });
      	});
      }
The problem is after the click event mouseOut and mouseOver events are fired too. So the path is highlighted for a fraction of a second then the default hover behavior overrides it.

I tried overriding those events by returning false on plotOptions.series.point.events.mouseOut and plotOptions.series.point.events.mouseOver but that just overrides the tooltip not the hovering effect with the opacity effects.

Then I tried overriding setState altogether and make a custom function for it:

Code: Select all

(function(H) {
    H.seriesTypes.sankey.prototype.pointClass.prototype.setState = function() {
      H.Point.prototype.setState.apply(this, arguments);
    }
  }(Highcharts));
  
But that only overrides the hover effect on a node, not a link.

What do you reckon is the best way to achieve what I want to do?

Thanks,
Loic
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Sankey Chart: Overriding hover effect

Hello Loic!
Welcome to our forum and thanks for contacting us with your question!

I am not entirely sure if I understand you correctly, but I can suggest you change your logic of highlighting a little bit. It is not the best idea to set the state to hover while clicking on this point, I think the better solution would be to change the color of clicked link (and links in the path) using point.update method. To highlight links between nodes that were taken by people you can use a recursive function, just like in the demo below. If you click on the link, the path before it will be highlighted, if you click another, the other path will be highlighted and if you unclick this link it will take color from its 'fromNode' point.

Demo: https://jsfiddle.net/BlackLabel/75gdo2rv/
API Reference: https://api.highcharts.com/class-refere ... int#update

Let me know if that fits your requirement.
Kind regards!
Hubert Kozik
Highcharts Developer
loic.dekester
Posts: 3
Joined: Thu Jun 30, 2022 10:45 pm

Re: Sankey Chart: Overriding hover effect

Hi Hubert,

Thanks for your reply.

Your solution is pretty simple so I am going to go with it for now.
But just for my knowledge, is there a way to override the state changes of the nodes?

Regards,
Loic
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Sankey Chart: Overriding hover effect

Loic,
To override the state of the nodes you should use point.setState method - just like you wanted to use in your first post. But you have to remember that these states are also used in mouseOver/mouseOut events, so something can set another state on this point. I have prepared a simple demo, where by clicking buttons you can set the state on all points.

Demo: https://jsfiddle.net/BlackLabel/3jzoynaf/
API Reference: https://api.highcharts.com/class-refere ... t#setState

Kind regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”