Change length of each link in highchart network graph

Question

Is it possible to set length of each link individually in network graph in highcharts ? Basically what I want is to plot something like below in which each user is plotted at different length from the center user ?

I am trying with linkLength but it will set length for all links . How can I customize the length of each link here ?

Check this related topic: https://stackoverflow.com/questions/59354126/how-to-aligment-nodes-with-highcharts — Sebastian Wędzel, Jul 06 '20 at 11:24

score 1 · Answer 1 · answered Jul 03 '20 at 20:01

I think the only possibility is to set the initial position of each node in the network. That way, you might get your desired result.

initialPositions: function() {
    var chart = this.series[0].chart,
      width = chart.plotWidth,
      height = chart.plotHeight;
      
    this.nodes.forEach(function(node, i) {
        if(i === 0){
        node.plotX = 600;
        node.plotY = 100;
      }
      
      if(i === 1) {
        node.plotX = 350;
        node.plotY = 100;
      }
      
      if(i === 2){
        node.plotX = 200;
        node.plotY = 0;
      }
      
      if(i === 3) {
        node.plotX = 0;
        node.plotY = 0;
      }
      
      if(i === 4) {
        node.plotX = 200;
        node.plotY = 200;
      }
    });
  }

API Docs:

https://api.highcharts.com/highcharts/series.networkgraph.layoutAlgorithm.maxIterations https://api.highcharts.com/highcharts/series.networkgraph.layoutAlgorithm.initialPositions

Demo:

https://jsfiddle.net/BlackLabel/06Lkgwbz/

I am afraid that the code sample is not related to the demo. — Sebastian Wędzel, Jul 06 '20 at 11:24

Change length of each link in highchart network graph

1 Answers1