Highcharts sankey diagrams multiple series

Question

I would like to have multiple series in my sankey diagram so that the legend adjusts along.

For now, I have to have to trick with an empty data series:

series: [{
  name: 'New allocations',
  keys: ['from', 'to', 'weight', 'color'],
  data: sortedData,
  centerInCategory: true,
  showInLegend: true,
  color: 'pink',
  colorByPoint: false,
  nodes,
}, {
  name: 'Current allocations',
  keys: ['from', 'to', 'weight', 'color'],
  data: [], // Only added so that it is displayed in the legend :(
  centerInCategory: true,
  showInLegend: true,
  color: 'blue',
  colorByPoint: false,
  nodes,
}]

But it doesn't feel correct for color handling, nor tooltip content.

Thanks

You mean something like in this [example](https://jsfiddle.net/BlackLabel/q0L3jdy2/)? — Sebastian Hajdus, Jul 05 '22 at 10:28
Thanks for getting back. Well, the example you submitted uses the same trick as I did, by not setting any data to legend series. But then, one can't hover the legend and see only related links, which would be the expected behavior. Shouldn't Highcharts merge the series at some point? — Augustin Riedinger, Jul 05 '22 at 14:33

score 0 · Answer 1 · answered Jul 06 '22 at 11:41

A possible solution would be to use hide() and show() methods, another thing is to set the color to transparent. Unfortunately, I don't see an option to not have the whole date in the following series because otherwise the series is added to the whole width of the chart.

  var series = chart.series[1];
  if (series.visible) {
    series.hide();
    e.target.innerHTML = 'Show apples';
  } else {
    series.show();
    e.target.innerHTML = 'Hide apples';
  }

Demo:

https://jsfiddle.net/BlackLabel/q0L3jdy2/3/

API References:

https://api.highcharts.com/class-reference/Highcharts.Series.html#hide

https://api.highcharts.com/class-reference/Highcharts.Series.html#show

Highcharts sankey diagrams multiple series

1 Answers1