Highcharts Demo

author(s): Paweł Fus

by Black Label

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;
	height: 500px;
}

JavaScript

(function(H) {
  H.wrap(H.seriesTypes.networkgraph.prototype.pointClass.prototype, 'getLinkPath', function(p) {
    var left = this.fromNode,
      right = this.toNode;
    // Start always from left to the right node, to prevent rendering
    // labels upside down
    if (left.plotX > right.plotX) {
      left = this.toNode;
      right = this.fromNode;
    }
    return [
      ['M', left.plotX || 0, left.plotY || 0],
      ['L', right.plotX || 0, right.plotY || 0],
      ['L', right.plotX - 20, right.plotY - 20],
    ]
  });
}(Highcharts));

Highcharts.chart('container', {
  chart: {
    type: 'networkgraph'
  },
  series: [{
    marker: {
      radius: 10
    },
    data: [{
      from: 'n1',
      to: 'n2'
    }, {
      from: 'n2',
      to: 'n3'
    }, {
      from: 'n3',
      to: 'n4'
    }, {
      from: 'n4',
      to: 'n5'
    }, {
      from: 'n5',
      to: 'n1'
    }]
  }]
});