Highcharts test tool

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.src.js"></script>

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

CSS

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

JavaScript

function createMaxAnnotation(value, seriesIndex) {
  return {
    labels: [{
      point: {
        x: 0,
        yAxis: 0,
        y: value
      },
      style: {
        color: Highcharts.getOptions().colors[seriesIndex]
      },
      y: 0,
      shape: 'none',
      backgroundColor: 'transparent',
      borderWidth: 0,
      formatter: function() {
        return this.target.chart.series[seriesIndex].visible ? 'Max' : '';
      }
    }],
    shapes: [{
      type: 'path',
      strokeWidth: 1,
      stroke: Highcharts.getOptions().colors[seriesIndex],
      dashStyle: 'dot',
      d: function() {
        var chart = this.chart,
          yAxis = chart.yAxis[0];

        return !this.chart.series[seriesIndex].visible ? ['M', 0, 0] : [
          'M',
          chart.plotLeft,
          yAxis.toPixels(value),
          'L',
          chart.plotLeft + chart.plotWidth,
          yAxis.toPixels(value)
        ]
      }
    }]
  }
}


Highcharts.chart('container', {
  xAxis: {
    type: 'datetime'
  },

  annotations: [
    createMaxAnnotation(5, 0),
    createMaxAnnotation(7, 1)
  ],

  plotOptions: {
    series: {
      pointStart: Date.UTC(2018, 0, 1),
      pointIntervalUnit: 'day'
    }
  },

  series: [{
    data: [1, 4, 3, 5]
  }, {
    data: [7, 3, 4, 2]
  }]
});