Highcharts Demo

author(s): Torstein Hønsi

by Rajesh Danabal

HTML

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

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

JavaScript

Highcharts.chart('container', {
  "annotations": [{
    "labels": [{
      "allowOverlap": true,
      "backgroundColor": "#A6A8AB",
      "borderColor": "#A6A8AB",
      "fill": "#A6A8AB",
      "stroke": "#A6A8AB",
      point: {
        x: 0,
        y: 407.43,
        xAxis: 0,
        yAxis: 2
      },
      "shape": "oval",
      "padding": 4,
      "text": " ",
      "x": -0.5,
      "y": 3
    }, {
      "allowOverlap": true,
      "backgroundColor": "#A6A8AB",
      "borderColor": "#A6A8AB",
      "fill": "#A6A8AB",
      "stroke": "#A6A8AB",
      point: {x: 1, y: 321.08, xAxis: 0, yAxis: 2},
      "shape": "oval",
      "padding": 4,
      "text": " ",
      "x": -0.5,
      "y": 3
    }, {
      "allowOverlap": true,
      "backgroundColor": "#A6A8AB",
      "borderColor": "#A6A8AB",
      "fill": "#A6A8AB",
      "stroke": "#A6A8AB",
      point: {x: 2, y: 417.9, xAxis: 0, yAxis: 2},
      "shape": "oval",
      "padding": 4,
      "text": " ",
      "x": -0.5,
      "y": 3
    }, {
      "allowOverlap": true,
      "backgroundColor": "#A6A8AB",
      "borderColor": "#A6A8AB",
      "fill": "#A6A8AB",
      "stroke": "#A6A8AB",
      point: {x: 3, y: 401.53, xAxis: 0, yAxis: 2},
      "shape": "oval",
      "padding": 4,
      "text": " ",
      "x": -0.5,
      "y": 3
    }, {
      "allowOverlap": true,
      "backgroundColor": "#A6A8AB",
      "borderColor": "#A6A8AB",
      "fill": "#A6A8AB",
      "stroke": "#A6A8AB",
      "point": {
        "x": 4,
        "y": -99.79,
        "xAxis": 0,
        "yAxis": 2
      },
      "shape": "oval",
      "padding": 4,
      "text": " ",
      "x": -0.5,
      "y": 3
    }, {
      "allowOverlap": true,
      "backgroundColor": "#A6A8AB",
      "borderColor": "#A6A8AB",
      "fill": "#A6A8AB",
      "stroke": "#A6A8AB",
      "point": {
        "x": 5,
        "y": -99.5,
        "xAxis": 0,
        "yAxis": 2
      },
      "shape": "oval",
      "padding": 4,
      "text": " ",
      "x": -0.5,
     ...