JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://www.highcharts.com/js/testing-stock.js"></script>
<button id="addFlag">add flag</button>
<div id="container" style="height: 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 : 5
},
title : {
text : 'USD to EUR exchange rate'
},
yAxis : {
title : {
text : 'Exchange rate'
}
},
series : [{
name : 'USD to EUR',
data : data,
id : 'dataseries',
tooltip : {
yDecimals: 4
}
},{
type : 'flags',
data : []
}]
}, function(chart){
$('#addFlag').click(function(){
var y = 2000 + Math.random()*11|0,
m = Math.random() * 12|0,
d = Math.random()*31|0;
chart.series[1].addPoint({
x : Date.UTC(12,12,12),
title : 'flag'
});
});
});
});
});