Network / Force Directed Graph - Highcharts

author(s): Paweł Fus

by Black Label

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'
  },

  plotOptions: {
    networkgraph: {
      layoutAlgorithm: {
        enableSimulation: true
      }
    }
  },

  series: [{ // first series
    marker: {
      symbol: 'square',
      radius: 5
    },
    dataLabels: {
      enabled: true
    },
    data: [{
      from: 'Europe',
      to: 'UK'
    }, {
      from: 'Europe',
      to: 'Poland'
    }, {
      from: 'UK',
      to: 'London'
    }, {
      from: 'UK',
      to: 'Bristol'
    }, {
      from: 'London',
      to: 'London Centre'
    }, {
      from: 'Poland',
      to: 'Warsaw'
    }, {
      from: 'Poland',
      to: 'Krakow'
    }],
    nodes: [{
      id: 'Krakow',
      color: 'orange',
      marker: {
        symbol: 'triangle',
        radius: 12
      }
    }]
  }, { // second series
    dataLabels: {
      enabled: true
    },
    data: [{
      from: 'World',
      to: 'Europe'
    }, {
      from: 'World',
      to: 'Africa'
    }, {
      from: 'Europe',
      to: 'Poland'
    }],
    nodes: [{
      id: 'Europe',
      color: 'green',
      marker: {
        symbol: 'square',
        radius: 8
      }
    }]
  }]

});