1

I'm trying to use highcharts to render a sankey chart like this.

In here, the first node has a higher "value" compared to its outgoing link. Is there a way to achieve this? I've gone through the highchart's sankey APIs but can't find anything which would allow me to set a node's height larger than its outgoing link.

I've created this JsFiddle as a starting point. You can see that the "Step 1" and "Step 2" nodes have a 1:1 height but I want the first node to be larger 75 and only have an outgoing link to "Step 2" of value 50

Any pointers on how to achieve this?

Mia214
  • 13
  • 2

1 Answers1

0

Inside events.load it's possible for series like Sankey to hide nodes and links, with update options update and change graphic attributes.

  chart: {
    events: {
      load: function() {
        let chart = this,
          series = chart.series[0],
          nodes = series.nodeLookup,
          columns = series.nodeColumns;

        for (let i in nodes) {
          if (nodes[i].id === "step0") {
            nodes[i].update({
              color: 'transparent'
            });
            nodes[i].graphic.hide();
            nodes[i].dataLabel.hide();
            nodes[i].visible = false;
            nodes[i].linksFrom[0].graphic.hide();
          }
        }
      }
    }
  },

Live demo: https://jsfiddle.net/BlackLabel/342pvzfj/1/

---- EDIT

To adjust the chart edge and chart plot area try chart.marginLeft gives way to move the chart to the left.

marginLeft: -100,
Sebastian Hajdus
  • 1,422
  • 1
  • 5
  • 14
  • Thanks for this but this only solves part of the problem. In this case, you're hiding the first node of the chart. This results in the chart "offset" by one node / has whitespace at the start. Is there a way to avoid this white space? – Mia214 Sep 15 '22 at 05:08
  • To adjust the chart edge and chart plot area try chart.marginLeft gives way to move the chart to the left. – Sebastian Hajdus Sep 15 '22 at 10:25