Network / Force Directed Graph - Highcharts

author(s): Paweł Fus

by Rajan Paneru

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>

<div id="container"></div>

JavaScript

Highcharts.chart('container', {

  chart: {
    type: 'networkgraph',
    events: {
      load() {
        let series = this.series[0];
        series.data.forEach(function(point, i) {
        	/* if (point.color) {
        	            series.nodes[i + 1].color = point.color;
        	          } */
        })
      }
    }
  },
  
  title: {
    text: 'A Force-Directed Network Graph in Highcharts'
  },
  
  plotOptions: {
    networkgraph: {
      layoutAlgorithm: {
        enableSimulation: true
      }
    }
  },
  
  series: [{
    dataLabels: {
      enabled: true
    },
    link:{width:1},
    data: [
			{from: 'Europe', to: 'UK'},
      {from: 'Europe', to: 'Poland'},
      {from: 'Europe', to: 'Italy', color: 'orange', width: 5, marker:{radius:20}},
      {from: 'UK', to: 'London'},
      {from: 'UK', to: 'Bristol'},
      {from: 'London', to: 'London Centre'},
      {from: 'Poland', to: 'Warsaw'},
      {from: 'Poland', to: 'Krakow', color: 'red'},
      {from: 'Italy', to: 'Roma'},
      {from: 'Italy', to: 'Piza'}
    ]
  }]
  
});