HS with plotband and annotation

author(s): Torstein Hønsi

by halloleo

HTML

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

<div id="container"></div>

JavaScript

var warnMessage_short = 'Few data points!'

var warnMessage_detailed = 'A long explanation for this<br/>' +
                           'can be found here'

function anno_mouseover(e) {
    console.log('Here I want to set the annotation to warnMessage_detailed')
}

function anno_mouseout(e) {
    console.log('Here I want to set the annotation back to warnMessage_short')
}

let chart  = Highcharts.chart('container', {
    chart: {
        zoomType: 'x'
    },

    title: {
        text: 'Highcharts Annotations'
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }],

    xAxis: {
        tickInterval: 0.5,
        plotBands: {
            color: '#fffcdF',
            from: 7.5,
            to: 8.5,
            events: {
                mouseover: anno_mouseover,
                mouseout: anno_mouseout
            }
        }
    },

    annotations: [{
        labels: [{
            point: {
                x: 8,
                y: -3,
                xAxis: 0,
            },
            text: warnMessage_short
        }],
        labelOptions: {
            x: 0, y: -35
        }
    }]
});