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");
}
});
});
}
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));
What do you reckon is the best way to achieve what I want to do?
Thanks,
Loic