Highcharts test tool - Marker

by rgendron

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>

CSS

#container {
  min-width: 300px;
  max-width: 800px;
  height: 300px;
  margin: 1em auto;
}

JavaScript

(function(H) {
  H.wrap(H.Chart.prototype, 'getContainer', function(proceed) {
    proceed.apply(this);

    var chart = this,
      renderer = chart.renderer,
      defOptions = chart.options.defs || [],
      i = defOptions.length,
      def,
      D;

    while (i--) {
      def = defOptions[i];
      var D = renderer.createElement('marker').attr({
        id: def.id,
        viewBox: "0 0 10 10",
        refX: 1,
        refY: 5,
        markerWidth: 6,
        markerHeight: 6,
        orient: 'auto',
        fill: 'inherit',
      }).add(renderer.defs);
      renderer.createElement('path').attr({
        d: def.path,
        fill: 'red'
      }).add(D);
    }
  });

  H.wrap(H.Series.prototype, 'drawGraph', function(proceed) {
    proceed.apply(this);
    if (this.options.endMarker) {
      this.graph.element.setAttribute('marker-end', this.options.endMarker);
    }
  });
})(Highcharts);

$('#container').highcharts({
  defs: [{
    id: 'arrow',
    path: 'M 0 0 L 10 5 L 0 10 z',
    fill: 'inherit'
  }],
  xAxis: {
    min: -1,
    max: 2
  },
  series: [{
    data: [29.9, 71.5],
    fill: 'red',
    marker: {
      enabled: false
    },
    endMarker: 'url(#arrow)'
  }]

});