Network graph (force directed graph)

author(s): Paweł Fus

by b_g_v

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: {
      keys: ['from', 'to', 'color'],
      layoutAlgorithm: {
        enableSimulation: true,
        friction: -0.9
      }
    }
  },
  series: [{
    dataLabels: {
      enabled: true,
      linkFormat: ''
    },
    data: [
      ['Slavic', 'East Slavic', 'red'],
      ['Slavic', 'West Slavic', 'red'],
      ['Slavic', 'South Slavic', 'red'],
      // Leaves:
      ['West Slavic', 'Polish'],
      ['West Slavic', 'Slovak'],
      ['West Slavic', 'Czech'],
      ['West Slavic', 'Wendish'],
      ['East Slavic', 'Bulgarian'],
      ['East Slavic', 'Old Church Slavonic'],
      ['East Slavic', 'Macedonian'],
      ['East Slavic', 'Serbo-Croatian'],
      ['East Slavic', 'Slovene'],
      ['South Slavic', 'Russian'],
      ['South Slavic', 'Ukrainian'],
      ['South Slavic', 'Belarusian'],
      ['South Slavic', 'Rusyn']
    ]
  }]
});