Show Mouse Coodinates

by Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

<div>X-Coordinate: <span id='X'>0</span></div>
<div>Y-Coordinate: <span id='Y'>0</span></div>
<div>X value: <span id='x-value'>0</span></div>
<div>Y value: <span id='y-value'>0</span></div>
<div>Is inside plot: <span id='is-inside'>false</span></div>

JavaScript

$(function () {

    $('#container').highcharts({
        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]
        }]
    });
    
    $('#container').bind('mousemove', function (e) {
        var chart = $(this).highcharts();
        e = chart.pointer.normalize(e);
        
        $("#X").text(e.chartX - chart.plotLeft);
        $("#Y").text(e.chartY - chart.plotTop);
        $("#x-value").text(chart.xAxis[0].toValue(e.chartX));
        $("#y-value").text(chart.yAxis[0].toValue(e.chartY));
        $("#is-inside").text(chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop));
    });
    
});