Highcharts Demo

author(s): Torstein Hønsi

HTML

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

CSS

#container {
    height: 500px;
    min-width: 310px;
    max-width: 1500px;
    margin: 0 auto;
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

$(function () {
    $('#container').highcharts({
        title: {
            text: 'First point at (4,2) and second at (6,4)'
        },
        series: [{
            data: [
                [4, 2],
                [6, 4]
            ]
        }],
        tooltip: {
            crosshairs: [{
                zIndex: 5,
                dashStyle: 'dot',
                snap: false,
                color: 'gray'
            }, {
                zIndex: 5,
                dashStyle: 'dot',
                snap: false,
                color: 'gray'
            }]
        }
    });


    // Display custom label with lat/lon next to crosshairs
    var chart = $('#container').highcharts();
    $('#container').mousemove(function (e) {
        var position;

        if (chart) {
            if (!chart.lab) {
                chart.lab = chart.renderer.text('', 0, 0)
                    .attr({
                    zIndex: 5
                })
                    .css({
                    color: '#505050'
                })
                    .add();
            }

            e = chart.pointer.normalize(e);
            position = {
                x: chart.xAxis[0].toValue(e.chartX),
                y: chart.yAxis[0].toValue(e.chartY)
            };

            chart.lab.attr({
                x: e.chartX + 5,
                y: e.chartY - 22,
                text: 'x: ' + position.x.toFixed(2) + '<br>y: ' + position.y.toFixed(2)
            });
        }
    });

    $('#container').mouseout(function () {
        if (chart && chart.lab) {
            chart.lab.destroy();
            chart.lab = null;
        }
    });
});