JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://www.highcharts.com/js/testing-stock.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
JavaScript
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
title: {
text: 'USD to EUR exchange rate'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
series: [{
name: 'USD to EUR',
data: data,
id: 'dataseries',
tooltip: {
yDecimals: 4
},
events: {
click: function(e){
var series = this,
chart = this.chart,
x = series.xAxis.translate( e.clientX - chart.plotLeft, true );
chart.series[1].addPoint({
x: x,
title: 'example'
});
}
}
}, {
type: 'flags',
name: 'Flags on series',
onSeries: 'dataseries',
shape: 'squarepin',
data: []
}]
});
});
});