CODEWITHSUNDEEP
javascripthighchartssankey-diagram
Junaid P Khader
Junaid P Khader

Reputation: 203

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

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?

Upvotes: 5

Views: 2096

Answers (2)

Dmitry
Dmitry

Reputation: 7276

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

Upvotes: 2

Kamil Kulig
Kamil Kulig

Reputation: 5826

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

Upvotes: 3

Related Questions