Highcharts Demo

author(s): Torstein Hønsi

by wchmiel

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

JavaScript

// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.arcArrow = function(x, y, w, h, options) {
  var start = options.start,
  	pick = Highcharts.pick,
    defined = Highcharts.defined,
    rx = options.r || w,
    ry = options.r || h || w,
    proximity = 0.001,
    fullCircle =
    Math.abs(options.end - options.start - 2 * Math.PI) <
    proximity,
    // Substract a small number to prevent cos and sin of start and
    // end from becoming equal on 360 arcs (related: #1561)
    end = options.end - proximity,
    innerRadius = options.innerR,
    open = pick(options.open, fullCircle),
    cosStart = Math.cos(start),
    sinStart = Math.sin(start),
    cosEnd = Math.cos(end),
    sinEnd = Math.sin(end),
    // Proximity takes care of rounding errors around PI (#6971)
    longArc = options.end - start - Math.PI < proximity ? 0 : 1,
    arc;
    
  // Here you can define your arrows path instead of arc
  // Try to add additional code to beggining and end of existing arc

  arc = [
    'M',
    x + rx * cosStart,
    y + ry * sinStart,
    'A', // arcTo
    rx, // x radius
    ry, // y radius
    0, // slanting
    longArc, // long or short arc
    1, // clockwise
    x + rx * cosEnd,
    y + ry * sinEnd
  ];

  if (defined(innerRadius)) {
    arc.push(
      open ? 'M' : 'L',
      x + innerRadius * cosEnd,
      y + innerRadius * sinEnd,
      'A', // arcTo
      innerRadius, // x radius
      innerRadius, // y radius
      0, // slanting
      longArc, // long or short arc
      0, // clockwise
      x + innerRadius * cosStart,
      y + innerRadius * sinStart
    );
  }

  arc.push(open ? '' : 'Z'); // close
  return arc;
};
if (Highcharts.VMLRenderer) {
  Highcharts.VMLRenderer.prototype.symbols.arcArrow = Highcharts.SVGRenderer.prototype.symbols.arcArrow;
}


(function(H) {
  H.SVGRenderer.prototype.arc = function(x, y, r, innerR, start, end) {
    var arc,
      isObject = H.isObject,
      options;

    if (isObject(x)) {
      options =...