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: {
            		linkLength: 60,
                enableSimulation: true
            }
        }
    },
    series: [{
        dataLabels: {
            enabled: true
        },
        nodes: [{
        	id: 'n1',
          marker: {
          	radius: 3
          }
        }, {
        	id: 'n2',
          marker: {
          	radius: 6
          }
        }, {
        	id: 'n3',
          marker: {
          	radius: 3
          }
        }, {
        	id: 'n4',
          marker: {
          	radius: 4
          }
        }, {
        	id: 'n5',
          marker: {
          	radius: 8
          }
        }, {
        	id: 'n6',
          marker: {
          	radius: 14
          }
        }, {
        	id: 'n7',
          marker: {
          	radius: 17
          }
        }, {
        	id: 'n8',
          marker: {
          	radius: 17
          }
        }, {
        	id: 'n9',
          marker: {
          	radius: 13
          }
        }, {
        	id: 'n10',
          marker: {
          	radius: 13
          }
        }],
        data: [
        	{ from: 'n1', to: 'n7' },
        	{ from: 'n2', to: 'n7' },
        	{ from: 'n3', to: 'n6' },
        	{ from: 'n4', to: 'n7' },
        	{ from: 'n5', to: 'n6' },
        	{ from: 'n5', to: 'n8' },
        	{ from: 'n6', to: 'n7' },
        	{ from: 'n6', to: 'n8' },
        	{ from: 'n6', to: 'n9' },
        	{ from: 'n6', to: 'n10' },
        	{ from: 'n7', to: 'n8' },
        	{ from: 'n7', to: 'n9' },
        	{ from: 'n8', to: 'n9' },
        	{ from: 'n8', to: 'n10' },
        	{ from: 'n9', to: 'n10' },
        ]
    }]
});