Events on Points

Example showing Click event on graph points.

by mhardik

HTML

<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="http://code.highcharts.com/stock/highstock.js"></script>

JavaScript

$(function() {
var chart = Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
    
    plotOptions: {
        series: {
            cursor: 'pointer',
            events: {
                click: function(event) {
                       // event.point.y
                    //alert(this.name + " Point Name: "  + event.pageX);
                   createTooltip(event);          
                },
                mouseOut: function(event) {
                    hideTooltip(event);
                }
               
            }
        }
    },
    
    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]        
        }]
    });
});

function createTooltip(event){          
    $('<div id="tooltip" class="tooltip">Hello World</div>').appendTo('body');
    positionTooltip(event);        
};

function positionTooltip(event){
    var tPosX = event.pageX - 10;
    var tPosY = event.pageY - 100;
    $('div.tooltip').css({'position': 'absolute', 'top': tPosY, 'left': tPosX});
};

function hideTooltip(event){
     $('#tooltip').css({'display': 'none'});
};