How to aligment nodes with highcharts

Question

I am trying to alignment nodes, But I cant see any options how to do it, Currently my code is

Highcharts.chart('container', {
chart: {
    type: 'networkgraph',
    plotBorderWidth: 1
},
title: {
    text: 'Trans-Siberian Railway'
},
subtitle: {
    text: 'Barnes-Hut approximation'
},
plotOptions: {
    networkgraph: {
        layoutAlgorithm: {
            enableSimulation: false,
            linkLength: 100,
            integration: 'verlet',
            approximation: 'barnes-hut',
            gravitationalConstant: 4,
                // Elastic like forces:
            attractiveForce: function (d, k) {
             return (k - d) / d; 
            },
         /*    repulsiveForce: function (d, k) {
                return Math.min((k * k) / (d), 100);
            } */

        }
    }
},
series: [{
    marker: {
        radius: 3,
        lineWidth: 1
    },
    dataLabels: {
        enabled: true,
        linkFormatter: function () {
            return '';
        }
    },
    nodes: [

       {
        id: 'test',
        marker: {
            radius: 10
        }
    },
    {
        id: 'Moscow',
        marker: {
            radius: 10
        }
    }, {
        id: 'Beijing',
        marker: {
            radius: 10
        }
    },
    {
        id: 'Brussels',
        marker: {
            radius: 10
        }
    },
    {
        id: 'Bangkok',
        marker: {
            radius: 10
        }
    }],
    data: [
        { from: 'Bangkok', to: 'Beijing', color: 'blue' },
        { from: 'Moscow', to: 'Beijing', color: 'blue' },
         { from: 'test', to: 'Moscow', color: 'blue' },
       { from: 'Beijing', to: 'Brussels', color: 'blue' },




    ]
}]

});

the result of code is:

and its still not alignment the wanted results is

Would you like to achieve something like this: https://jsfiddle.net/BlackLabel/wj0pudb1/? — Sebastian Wędzel, Dec 16 '19 at 14:20
@SebastianWędzel but it still not like I wanted basically all should be like straight lines like example — Vitaly Menchikovsky, Dec 16 '19 at 14:32

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

You should be able to set fixed positions in the networkgraph chart by using the initialPositions callback. To work it well you need also to set maxIterations to some small value, like 1.

See demo

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: https://api.highcharts.com/highcharts/series.networkgraph.layoutAlgorithm.maxIterations

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

If you want to have those points not draggable, maybe an easier solution will be to render regular line chart?

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

wow that cool demos the issue is the what if you have more dynamic way, like if you will have test2 node that connected to Brussels , how to manage the calculation ? Also what if you will not have Brussels then the graph isnt aligment to one line... — Vitaly Menchikovsky, Dec 18 '19 at 08:18
@VitalyMenchikovsky To render those positions dynamically you will need to implement your own algorithm. I tried to implement something like this but without success - demo: https://jsfiddle.net/BlackLabel/2fpvLszg/ . I have a problem with implementing the bottom lines. Maybe you will be able to achieve it. — Sebastian Wędzel, Dec 18 '19 at 14:43

How to aligment nodes with highcharts

1 Answers1

Linked