Annotations Demo

author(s): Black Label

by Mike Rawling

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>
<h3>Add annotation via buttons</h3>
<div style="margin: 10px 0px 50px 0px;width: 854px; float: left;">
		<div id="container" style="float: left; height: 542px; width: 800px">
		</div>
</div>

CSS

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

JavaScript

$(function () {
    var options = {
        chart: {
            width: 980,
            borderWidth: 5,
            borderColor: '#e8eaeb',
            borderRadius: 0,
            renderTo: 'container',
            backgroundColor: '#f7f7f7',
            marginTop: 50
        },
        xAxis: {
            min: 0,
            max: 10
        },
        title: {
            style: {
                'fontSize': '1em'
            },
            useHTML: true,
            x: -27,
            y: 8,
            text: '<span class="chart-title"> Drag and drop on a chart to add annotation  <span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>'
        },
        annotations: [{
            title: {
                text: '<span style="">drag me anywhere <br> dblclick to remove</span>',
                style: {
                    color: 'red'
                }
            },
            anchorX: "left",
            anchorY: "top",
            allowDragX: true,
            allowDragY: true,
            x: 515,
            y: 155
        }, {
            title: 'drag me <br> horizontaly',
            anchorX: "left",
            anchorY: "top",
            allowDragY: false,
            allowDragX: true,
            xValue: 4,
            yValue: 10,
            shape: {
                type: 'path',
                params: {
                    d: ['M', 0, 0, 'L', 110, 0],
                    stroke: '#c55'
                }
            }
        }, {
            title: 'on point <br> drag&drop <br> disabled',
            linkedTo: 'high',
            allowDragY: false,
            allowDragX: false,
            anchorX: "center",
            anchorY: "center",
            shape: {
                type: 'circle',
                params: {
                    r: 40,
                    stroke: '#c55'
                }
            }
        }, {
            x:...