Highcharts Annotations Demo

author(s): Karol Kolodziej

by jpeter06

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>

<div id="container"></div>
<button id="add-annotation">Add annotation</button>
<button id="remove-annotation">Remove annotation</button>

JavaScript

Highcharts.chart('container', {
    series: [{
        data: [2, 5, 1, 6, 7, 8, 5]
    }]
}, function () {
    const chart = this;
    document.getElementById('add-annotation').addEventListener(
        'click',
        function () {
            chart.addAnnotation({
            		id:'a1',
                labels: [{
                    point: {
                        xAxis: 0,
                        yAxis: 0,
                        x: 4,
                        y: 8
                    },
                    text: 'Max value'
                }]
            });
        });
    document.getElementById('remove-annotation').addEventListener(
    'click',
    function(){
      chart.removeAnnotation('a1')
    })
});