Highcharts Demo

author(s): Paweł Fus

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.toNode,
      right = this.fromNode;

    var angle = Math.atan((left.plotX - right.plotX) /
      (left.plotY - right.plotY));


    if (angle) {
      let path = ['M', left.plotX, left.plotY,'A',100,100,0,0,0, right.plotX, right.plotY],
        lastPoint = left,
        nextLastPoint = right,
        pointRadius = 50,
        arrowLength = 5,
        arrowWidth = 5;

      if (left.plotY < right.plotY) {
        path.push(
          nextLastPoint.plotX - pointRadius * Math.sin(angle),
          nextLastPoint.plotY - pointRadius * Math.cos(angle),
        
        );


      } else {
        path.push(
          nextLastPoint.plotX + pointRadius * Math.sin(angle),
          nextLastPoint.plotY + pointRadius * Math.cos(angle),
        );
        path.push(
          nextLastPoint.plotX + pointRadius * Math.sin(angle) + arrowLength * Math.sin(angle) - arrowWidth * Math.cos(angle),
          nextLastPoint.plotY + pointRadius * Math.cos(angle) + arrowLength * Math.cos(angle) + arrowWidth * Math.sin(angle),
        );
        path.push(
          nextLastPoint.plotX + pointRadius * Math.sin(angle),
          nextLastPoint.plotY + pointRadius * Math.cos(angle),
        );
        path.push(
          nextLastPoint.plotX + pointRadius * Math.sin(angle) + arrowLength * Math.sin(angle) + arrowWidth * Math.cos(angle),
          nextLastPoint.plotY + pointRadius * Math.cos(angle) + arrowLength * Math.cos(angle) - arrowWidth * Math.sin(angle),
        );

      }

      return path
    }
    return [
      ['M', left.plotX || 0, left.plotY || 0],
      ['A', right.plotX || 0, right.plotY || 0],
    ];
  });
}(Highcharts));

var dirDist50 = "#E8544E",
  dirDist10 = "#FFD265",
  dirDistLess10 = "#2AA775";

Highcharts.chart('container', {

  chart: {
    type: 'networkgraph',
    marginTop: 80
  },

  title: {
    text: 'South Korea domestic...