Different node tooltips in highcharts sankey diagram

Question

In a Highcharts sankey diagram, I would like to label the nodes with a tooltip. The left (sender nodes) should be labeled differently than the right ones (receiver nodes).

Example:
Left node: "CVP (Origin Party Votes): 6000"
Right node: "CVP (Receiver Party Votes): 5000"

I tried it with a nodeFormatter formatting function, but failed. The jsfiddle is here: https://jsfiddle.net/martindfurrer/ah175o8e/

tooltip: {
    nodeFormatter: 
        function() {          
             if (this.point.fromNode.name != null) {
                 return (point.name +'(Origin Party Votes): '+point.sum);
             }      
             else if (this.point.toNode.name != null) {
                 return (point.name +'(Receiver Party Votes): '+point.sum);
             };
        }              
}

score 2 · Accepted Answer · answered Apr 07 '19 at 08:31

You can use column to identify left and right nodes (fiddle):

tooltip: {
  nodeFormatter: function() {
    if (this.column === 0) {
      return (this.name + ' (Origin Party Votes): ' + this.sum);
    } else if (this.column === 1) {
      return (this.name + ' (Receiver Party Votes): ' + this.sum);
    }
  }
}

If you put console.log(this) as the first line in the nodeFormatter function, you can explore the available properties on the node.

Different node tooltips in highcharts sankey diagram

1 Answers1