Highcharts Demo

author(s): Torstein Hønsi

by Torstein Hønsi

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.src.js"></script>
<script src="https://code.highcharts.com/stock/modules/annotations.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>


<div id="container" style="height: 400px; min-width: 310px"></div>
<button id="export">Export Chart</button>

JavaScript

var chart;


$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json', function(data) {

    // Create the chart
    chart = Highcharts.stockChart('container', {


        rangeSelector: {
            selected: 0
        },

        title: {
            text: 'USD to EUR exchange rate'
        },

        tooltip: {
            style: {
                width: '200px'
            },
            valueDecimals: 4,
            shared: true
        },

        yAxis: {
            title: {
                text: 'Exchange rate'
            }
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function(e) {
                            drawRectangle(e);
                        }
                    }
                }
            }
        },

        series: [{
            name: 'USD to EUR',
            data: data,
            id: 'dataseries'


        }]
    });
});



function drawRectangle(e) {
	if (e.point) {
	    chart.addAnnotation({
        	labels: [{
	        	point: {
	                x: e.point.plotX,
                    y: e.point.plotY
                },
                text: 'Value: ' + e.point.y
            }]
        });
    }
}