Highcharts Annotations Demo

author(s): Sebastian Domas

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>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>

<div id="container" style="height: 400px; margin-top: 1em"></div>

CSS

#container {
	max-width: 800px;
	margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {

  chart: {
    alignTicks: false,
    inverted: true,
    panKey: 'shift',
    panning: true,
    zoomType: 'x'
  },
  series: [{
    color: '#0000ff',
    data: [
      [38, -178.7385],
      [40, -178.7385],
      [42, -178.7385],
      [44, -178.7385],
      [46, -178.7385],
      [48, -178.7385],
      [50, -178.7385],
      [52, -178.7385],
      [54, -178.7385],
      [56, -178.7385],
      [58, -178.7385],
      [60, -178.7385],
      [62, -178.7385],
      [64, -178.7385],
      [66, -178.7385],
      [68, -178.7385],
      [70, -178.7385],
      [72, -178.7385],
      [74, -178.7385],
      [76, -178.7385],
      [78, -178.7385],
      [80, -178.7385],
      [82, -178.7385],
      [84, -178.7385],
      [86, -178.7385],
      [88, -178.7385],
      [90, -178.7385],
      [91, -157.32175],
      [92, -157.32175],
      [93, -129.0925],
      [94, -129.0925],
      [95, -89.68825],
      [96, -89.68825],
      [97, -44.844],
      [98, -44.844],
      [99, 0],
      [100, 0]
    ],
    lineWidth: 0.5,
    marker: {
      enabled: false
    },
    name: '11/03/2019 09:37:34',
    tooltip: {
      headerFormat: '<b>{series.name}</b><br>',
      pointFormat: '{point.x}: {point.y:.2f}'
    },
    xAxis: 0,
    yAxis: 0
  }, {
    color: '#008000',
    data: [
      [38, -0.475749999999979],
      [40, -0.447249999999985],
      [42, -0.417999999999995],
      [44, -0.377749999999994],
      [46, -0.370249999999994],
      [48, -0.364999999999998],
      [50, -0.345500000000004],
      [52, -0.356000000000011],
      [54, -0.338000000000004],
      [56, -0.296750000000006],
      [58, -0.258250000000007],
      [60, -0.228750000000008],
      [62, -0.224750000000017],
      [64, -0.185750000000012],
      [66, -0.166250000000011],
      [68, -0.150750000000008],
      [70, -0.148750000000009],
      [72, -0.116500000000012],
      [74, -0.100250000000012],
      [76, -0.0660000000000123],
      [78, -0.0570000000000119],
     ...