With annotations

author(s): Torstein Hønsi

by Black Label

HTML

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

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

CSS

#container {
    height: 450px;
		width: 500px;
}

JavaScript

// Now create the chart
Highcharts.chart('container', {
  annotations: [{
		draggable: false,
		labels: [{
			text: 'Pixel coords',
			point: {
				x: 1,
				y: 20,
				xAxis: 0,
				yAxis: 0
			}
		}],
    shapes: [{
      points: [{
				x: 70, // no xAxis, use pixel position
				y: 115 // no yAxis, use pixel position
			}, {
				x: 70,
				y: 120
			}, {
				x: 110,
				y: 120
			}, {
				x: 110,
				y: 115
			}],
      type: 'path'
		}]
  }, {
		draggable: false,
		labels: [{
			text: 'Chart coords',
			point: {
				x: 2.5,
				y: 20,
				xAxis: 0,
				yAxis: 0
			}
		}],
    shapes: [{
      points: [{
				x: 2,
				y: 15,
				xAxis: 0, // xAxis reference used, use xAxis value
				yAxis: 0  // yAxis reference used, use xAxis value
			}, {
				x: 2,
				y: 20,
				xAxis: 0,
				yAxis: 0
			}, {
				x: 3,
				y: 20,
				xAxis: 0,
				yAxis: 0
			}, {
				x: 3,
				y: 15,
				xAxis: 0,
				yAxis: 0
			}],
      type: 'path'
    }]
  }, {
		draggable: false,
		labels: [{
			text: 'Mixed (gray), y>10',
			point: {
				x: 4,
				y: 20,
				xAxis: 0,
				yAxis: 0
			}
		}],
    shapes: [{
      points: [{
				x: 0,
				y: 0
			}, {
				x: 10000,
				y: 0
			}, {
				x: 10000,
				y: 10,
				yAxis: 0
			}, {
				// no xAxis, but with yAxis
				x: 0,
				y: 10,
				yAxis: 0
			}],
      type: 'path',
			fill: '#dedede',
			strokeWidth: 0
    }],
		zIndex: 0
  }],

  series: [{
    data: [5, 10, 15, 4, 16, 25]
  }]

});