Annotations Demo

author(s): Black Label

HTML

<link rel="stylesheet" href="http://blacklabel.github.io/annotations/css/styles.css">
<script src="http://code.highcharts.com/stock/highstock.src.js"></script>
<script src="http://blacklabel.github.io/annotations/js/annotations.js"></script>
		<div id="container" style="float: left; height: 542px; width: 800px">
		</div>

CSS

body {
    margin: 8px !important;
}
.chart-title {
    width: 949px !important;
}

JavaScript

$(function () {
    var options = {
        annotations: [{
        	xValue: 10,
          yValue: 5,
          shape: {
          	type: 'circle',
            params: {
            	r: 2,
           //		width: 2,
           //   height: 2,
              stroke: 'black',
            },
              units: 'values'
            
          },
          allowDragX: true,
          allowDragY: true,
        }],
        series: [{
            data: [13, 4, 5, {
                y: 1,
                id: 'high'
            },
            2, 1, 3, 2, 11, 6, 5, 13, 6, 9, 11, 2, 3, 7, 9, 11]
        }]
    };

    var chart = new Highcharts.StockChart('container', options);
});