Network / Force Directed Graph - Highcharts

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>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

CSS

#container {
	min-width: 320px;
	max-width: 800px;
	margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'networkgraph',
        height: '100%'
    },
    plotOptions: {
        networkgraph: {
            layoutAlgorithm: {
                enableSimulation: true
            }
        }
    },
    series: [{
        dataLabels: {
            enabled: true
        },
        nodes: [{
        	id: 'n1',
          dataLabels: {
          	format: 'Indomethacin, continous<br>IV infusion (31 infants)'
          }
        }, {
        	id: 'n2',
          dataLabels: {
          	format: 'Ibuprofen, standard IV<br> dose (715 infants)'
          }
        }, {
        	id: 'n3',
          dataLabels: {
          	format: 'Ibuprofen, continuous IV<br>infusion (55 infants)'
          },
          marker: {
          	radius: 12
          }
        }, {
        	id: 'n4',
          dataLabels: {
          	format: 'Ibuprofen, high IV<br>dose (35 infants)'
          },
          marker: {
          	radius: 20
          }
        }],
        data: [{
        	from: 'n1',
          to: 'n2'
        }, {
        	from: 'n3',
          to: 'n2'
        }, {
        	from: 'n4',
          to: 'n2'
        }]
    }]
});