Highcharts Demo

author(s): Torstein Hønsi

by Anuradha Pai

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(H) {
  (function(H) {
    H.wrap(H.PlotLineOrBand.prototype, 'render', function(proceed) {
      var plotLine = this,
        axis = plotLine.axis,
        horiz = axis.horiz,
        options = plotLine.options,
        optionsLabel = options.label,
        label = plotLine.label,
        to = options.to,
        from = options.from,
        value = options.value,
        isBand = H.defined(from) && H.defined(to),
        isLine = H.defined(value),
        svgElem = plotLine.svgElem,
        isNew = !svgElem,
        path = [],
        addEvent,
        eventType,
        color = options.color,
        zIndex = H.pick(options.zIndex, 0),
        events = options.events,
        attribs = {
          'class': 'highcharts-plot-' + (isBand ? 'band ' : 'line ') + (options.className || '')
        },
        groupAttribs = {},
        renderer = axis.chart.renderer,
        groupName = isBand ? 'bands' : 'lines',
        group,
        log2lin = axis.log2lin;

      // logarithmic conversion
      if (axis.isLog) {
        from = log2lin(from);
        to = log2lin(to);
        value = log2lin(value);
      }


      // Set the presentational attributes
      if (isLine) {
        attribs = {
          stroke: color,
          'stroke-width': options.width
        };
        if (options.dashStyle) {
          attribs.dashstyle = options.dashStyle;
        }

      } else if (isBand) { // plot band
        if (color) {
          attribs.fill = color;
        }
        if (options.borderWidth) {
          attribs.stroke = options.borderColor;
          attribs['stroke-width'] = options.borderWidth;
        }
      }


      // Grouping and zIndex
      groupAttribs.zIndex = zIndex;
      groupName += '-' + zIndex;

      group = axis.plotLinesAndBandsGroups[groupName];
      if (!group) {
        axis.plotLinesAndBandsGroups[groupName] = group = renderer.g('plot-' + groupName)
          .attr(groupAttribs).add();
      }

      // Create the path
      if...