Is there any way to highlight specific node on click | Highcharts Sankey

Question

I would like to know whether a specific node can be highlighted on Click similar to states in hover(linkOpacity) and to replace it with it's previous colour when some another node/series is clicked.

In short, when the chart is loaded, the top node would be highlighted initially, and when the user clicks on another node, that particular selected node gets highlighted (and the initially highlighted node would get back to its normal colour).

Please find below a similar JSFiddle which highlights specific series on click (which is being done by adding class with the help of JavaScript).

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

Is there any feature in Highcharts which makes this possible without any DOM manipulation done by the end user?

score 3 · Answer 1 · answered Oct 24 '17 at 08:58

3

You can simply update the point's color on click event:

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

Live working example: http://jsfiddle.net/kkulig/dg2uf8d0/

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

answered Oct 24 '17 at 08:58

Kamil Kulig

5,756
1
8
12

Hi @Kamil Kulig, Thanks for the response, I've slightly edited the question. My requirement is to highlight one particular node at a time(which is selected). Is there any way to implement the same? – Junaid P Khader Oct 24 '17 at 09:19
@kKamil Kulig.. My requirement is to highlight all Childs, parents links based on user click on particular link or node starting to till finish – bhaRATh Apr 07 '21 at 06:57

Dmitry · Accepted Answer · 2017-10-24T13:17:03.247

2

You can simply remove the additionalClass from the previous element and then put in on the clicked element:

  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: a variant 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

edited Oct 24 '17 at 13:17

answered Oct 24 '17 at 09:49

Dmitry

6,716
14
37
39

Thanks for the response, but as I've clearly mentioned in the question, I would like to avoid any direct DOM manipulation done and asked specifically for any default options present in Highcharts. (SImilar to the previous answer) – Junaid P Khader Oct 24 '17 at 10:01
Hi @Dmitry. Thanks a lot for the answer. It's working! – Junaid P Khader Oct 24 '17 at 10:18
Your are welcome. Please accept the answer if it works for you. – Dmitry Oct 24 '17 at 10:19
1

Hi @Dmitry, This works fine, `but when you click on the node (the starting point in the series) and then afterwards you click somewhere else in the series, the whole node and it's connected series get's highlighted and it doesn't go back to it's previous state.` Is there any quick fix which you could suggest for the same? – SE_User Oct 24 '17 at 12:15
HI @Dmitry, I am also facing the same issue. – Junaid P Khader Oct 24 '17 at 12:39
1

@SE_User, I've added a code to disable selecting the root node. – Dmitry Oct 24 '17 at 13:19

Is there any way to highlight specific node on click | Highcharts Sankey

2 Answers2