Is there any way to highlight specific node when clicked | Highcharts sankey

Question

I would like to know if it is possible to select a specific node on Click, similar to indicates link hang ( linkOpacity ) and replace it with the previous color when clicking on any other node / series.

In short, when the chart is loaded, the top node will be highlighted at the initial stage, and when the user clicks on another node, the highlighted selected node will be highlighted (and the initially selected node will return to its normal color).

Below is a similar JSFiddle that selects specific episodes by click (which is done by adding a class using JavaScript).

events: { click: function (event) { event.target.classList.add('additionalClass'); } } 

Is there any feature in Highcharts that makes this possible without any end-user DOM manipulation?

Answer 1

You can simply remove additionalClass from the previous item and then paste onto the item with a click:

  events: { click: function (event) { let old_HL = document.querySelector('#container .highcharts-link.highcharts-point.additionalClass'); if (old_HL) old_HL.classList.remove('additionalClass'); event.target.classList.add('additionalClass'); } } 

Jsfiddle

EDIT: option without DOM functions:

 plotOptions: { series: { animation: false, dataLabels: { enabled: true, nodeFormat: "{point.name}mm" }, allowPointSelect: true,//you need this to allow selection colorByPoint: false, point: { events: { select: function(event) { if (typeof this.isNode !== 'undefined') return;//to disable selecting the root node this.custom_old_color = this.color;//save old color this.update({ color: 'red' }); }, unselect: function(event) { if (typeof this.isNode !== 'undefined') return; this.update({ color: this.custom_old_color//restore old color }); } } } } 

Jsfiddle

Answer 2

You can simply update the dot color on the click event:

  point: { events: { click: function(event) { this.update({ color: 'red' }); } } } 

Working example: http://jsfiddle.net/kkulig/dg2uf8d0/

API Link: https://api.highcharts.com/highcharts/plotOptions.sankey.point.events