Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

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

JavaScript

// GENAERATE ARROWS
(function(H) {
  H.wrap(H.Axis.prototype, 'getLinePath', function(proceed, lineWidth) {
    let path = proceed.call(this, lineWidth),
      arrowLength = 10,
      horiz = this.horiz,
      endX, endY;

    if (horiz) {
      endX = path[1][1];
      endY = path[1][2];

      path.push(
        ['M', endX, endY],
        ['L', endX - arrowLength, endY - arrowLength / 2],
        ['M', endX, endY],
        ['L', endX - arrowLength, endY + arrowLength / 2]
      );
    } else {
      endX = path[0][1];
      endY = path[0][2];

      path.push(
        ['M', endX, endY],
        ['L', endX - arrowLength / 2, endY + arrowLength],
        ['M', endX, endY],
        ['L', endX + arrowLength / 2, endY + arrowLength]
      );
    }

    return path;
  });
}(Highcharts));

function drawArrowLine(chart, fromPoint, toPoint, color, text) {
  const arrowLength = 10;
  const arrowAngle = Math.PI / 6;

  const angle = Math.atan2(toPoint.y - fromPoint.y, toPoint.x - fromPoint.x);

  const endArrow1 = {
    x: toPoint.x - arrowLength * Math.cos(angle - arrowAngle),
    y: toPoint.y - arrowLength * Math.sin(angle - arrowAngle)
  };
  const endArrow2 = {
    x: toPoint.x - arrowLength * Math.cos(angle + arrowAngle),
    y: toPoint.y - arrowLength * Math.sin(angle + arrowAngle)
  };

  const startArrow1 = {
    x: fromPoint.x + arrowLength * Math.cos(angle - arrowAngle),
    y: fromPoint.y + arrowLength * Math.sin(angle - arrowAngle)
  };
  const startArrow2 = {
    x: fromPoint.x + arrowLength * Math.cos(angle + arrowAngle),
    y: fromPoint.y + arrowLength * Math.sin(angle + arrowAngle)
  };

  const centerX = (fromPoint.x + toPoint.x) / 2;
  const centerY = (fromPoint.y + toPoint.y) / 2;

  const customLine = chart.renderer
    .path([
      'M', fromPoint.x, fromPoint.y,
      'L', toPoint.x, toPoint.y,

      'M', endArrow1.x, endArrow1.y,
      'L', toPoint.x, toPoint.y,
      'L', endArrow2.x, endArrow2.y,

      'M', startArrow1.x, startArrow1.y,
     ...