Highcharts Demo

author(s): Paweł Fus

by jeffersonswartz

HTML

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

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

CSS

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

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'networkgraph',
        plotBorderWidth: 1
    },
    title: {
        text: 'Networkgraph with custom forces'
    },
    plotOptions: {
        networkgraph: {
            turboThreshold: 0,
            keys: ['from', 'to', 'color']
        }
    },

    series: [{
        type: 'networkgraph',
        layoutAlgorithm: {
            enableSimulation: true,
            initialPositions: 'random',
            // Applied only to links, should be 0
            attractiveForce: function () {
                return 50;
            },
            repulsiveForce: function () {
                return 50;
            },
            integration: 'euler',
            // Half of the repulsive force
            gravitationalConstant: 25
        },
        nodes: [{
            id: 0,
            mass: 1,
            marker: {
                radius: 1
            },
            color: '#7cb5ec'
        }, {
            id: 0,
            mass: 1,
            marker: {
                radius: 1
            },
            color: '#7cb5ec'
        }, {
            id: 1,
            mass: 1,
            marker: {
                radius: 2
            },
            color: '#434348'
        }, {
            id: 100,
            mass: 1,
            marker: {
                radius: 2
            },
            color: '#434348'
        }, {
            id: 2,
            mass: 1,
            marker: {
                radius: 3
            },
            color: '#90ed7d'
        }, {
            id: 200,
            mass: 1,
            marker: {
                radius: 3
            },
            color: '#90ed7d'
        }, {
            id: 3,
            mass: 1,
            marker: {
                radius: 4
            },
            color: '#7cb5ec'
        }, {
            id: 300,
            mass: 1,
            marker: {
                radius: 4
            },
            color: '#7cb5ec'
        }, {
         ...