Highcharts - select point via event

author(s): Torstein Hønsi

by mark47

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; width: 500px"></div>
<button id="button">Select point</button>

JavaScript

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        
        series: [{
            type: 'area',
            name: 'Pain',
            data: [{
                x: 1,
                y: 5,
                status: "Baseline"
            },{
                x: 2,
                y: 4,
                status: "Getting Worse",
                date: "3/20/2015"                
            },{
                x: 3,
                y: 4,
                status: "Staying the Same",
                date: "3/31/2015"
            },{
                x: 4,
                y: 3,
                status: "Getting Worse",
                date: "4/1/2015"
            },{
                x: 5,
                y: 3,
                status: "Staying the Same",
                date: "4/1/2015"
            },{
                x: 6,
                y: 2,
                status: "Getting Worse",
                date: "4/2/2015"
            }]
        }]
    });
    
    // button handler
    var i = 0;
    $('#button').click(function() {
        if (i > 0) {
            chart.series[0].data[i-1].setState();
            chart.tooltip.hide();
        }
        if (i == chart.series[0].data.length) {
            i = 0;
        }
        chart.series[0].data[i].setState('hover');
        chart.tooltip.refresh(chart.series[0].data[i]);
        i++;
    });
});