JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.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
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'USD to EUR exchange rate'
},
tooltip: {
style: {
width: '200px'
},
valueDecimals: 4
},
yAxis : {
title : {
text : 'Exchange rate'
}
},
series : [{
name : 'USD to EUR',
data : data,
id : 'dataseries'
},
// the event marker flags
{
type : 'flags',
data : [{
x : Date.UTC(2011, 3, 25),
title : 'H',
url: 'http://www.google.com',
text : 'google'
}],
point:{
events:{
click: function(){
var url = this.url;
window.open(url,'_blank');
}
},
},
onSeries : 'dataseries',
shape : 'circlepin',
width : 16
}]
});
});
});