I am using Organization Chart, from high Charts. I am not able to adjust the height of the container with increasing number of nodes

Question

Image of my desired behaviour. Image of what I am getting

To get my desired behaviour I have to manually set height of the container like

<div id="container" style="height: 800px;"></div>

As I am dynamically importing data so height changes variably. I want height of my container to change with increasing no. of nodes, and I don't want my nodes to stack up in this way (Image of what I am getting). I want that the link between 2 nodes is always of some particular length.

Answer 1

Inside load events you can calculate node height, and update chart.height, for the adjust how your organization nodes and links looks try manipulate nodeWidth and nodeHeight.

  chart: {
    width: 600,
    inverted: true,
    events: {
      load() {
        let chart = this,
          numnode = 0,
          series = chart.series[0],
          newHeight = series.options.nodeHeight * series.nodeColumns[2].length;

        for (i in series.nodeColumns) {
          numnode += series.nodeColumns[i].length
        }
        newHeight = series.options.nodeHeight * numnode
        chart.update({
          chart: {
            height: newHeight
          }
        })
      }
    }
  },
  series: [{
    ...,
    nodeWidth: 100,
    nodeHeight: 150,
  }],

});

Live demo: https://jsfiddle.net/BlackLabel/abfdrLu4/