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>
<button onclick="update()">
  Remove Point
</button>

<button onclick="add()">
  Add Point
</button>

CSS

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

JavaScript

var H = Highcharts.chart('container', {
  chart: {
    type: 'networkgraph'
  },
  plotOptions: {
    networkgraph: {
      layoutAlgorithm: {
        enableSimulation: true
      }
    },
    point: {
      events: {
        click: function(event) {
        	console.log(event);
        }
      }
    }
  },

  series: [{
    dataLabels: {
      enabled: true,
      linkTextPath: {
        attributes: {
          dy: 12
        }
      },
      linkFormat: '{point.fromNode.name} \u2192 {point.toNode.name}',
      textPath: {
        enabled: true,
        attributes: {
          dy: 14,
          startOffset: '45%',
          textLength: 80
        }
      },
      format: 'Node: {point.name}'
    },
    marker: {
      radius: 35
    },
    data: [{
      from: 'n1',
      to: 'n2',
      visible: false
    }, {
      from: 'n2',
      to: 'n3'
    }, {
      from: 'n3',
      to: 'n4'
    }, {
      from: 'n4',
      to: 'n5'
    }, {
      from: 'n5',
      to: 'n1'
    }]
  }]
});

function update() {
	H.series[0].node[0].remove();
}
function add() {
	H.series[0].addPoint({
      from: 'n1',
      to: 'n2',
      visible: false
    });
}