Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

JavaScript

$(function() {
  var H = Highcharts;
	H.SVGRenderer.prototype.symbols.wtlabel = function(x, y, w, h ){
  	return [
    	'M', x, y,
      'L', x+15, y-15, x+70, y-15, x+70, y+15, x+15, y+15,
      'Z'
    ]
  }
  H.PlotLineOrBand.prototype.renderLabel = function(optionsLabel, path, isBand, zIndex) {
    var plotLine = this,
      label = plotLine.label,
      renderer = plotLine.axis.chart.renderer,
      attribs,
      xs,
      ys,
      x,
      y;

    // add the SVG element
    if (!label) {
      attribs = {
        align: optionsLabel.textAlign || optionsLabel.align,
        rotation: optionsLabel.rotation,
        'class': 'highcharts-plot-' + (isBand ? 'band' : 'line') + '-label ' + (optionsLabel.className || '')
      };

      attribs.zIndex = zIndex;

      if (optionsLabel.backgroundColor) {
        plotLine.label = label = renderer.label(
          optionsLabel.text,
          0,
          0,
          'wtlabel',
          null,
          null,
          optionsLabel.useHTML
        );

        attribs.fill = optionsLabel.backgroundColor;
       // attribs.padding = 5;
      } else {
        plotLine.label = label = renderer.text(
          optionsLabel.text,
          0,
          0,
          optionsLabel.useHTML
        );
      }
      label.attr(attribs)
        .add();


      label.css(optionsLabel.style);

    }

    // get the bounding box and align the label
    // #3000 changed to better handle choice between plotband or plotline
    xs = [path[1], path[4], (isBand ? path[6] : path[1])];
    ys = [path[2], path[5], (isBand ? path[7] : path[2])];
    x = H.arrayMin(xs);
    y = H.arrayMin(ys);

    label.align(optionsLabel, false, {
      x: x,
      y: y,
      width: H.arrayMax(xs) - x,
      height: H.arrayMax(ys) - y
    });
    label.show();
  };


  Highcharts.setOptions({
    global: {
      useUTC: false
    }
  });

  // Create the chart
  $('#container').highcharts('StockChart', {
    chart: {
      events: {
        load:...