JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/samples/data/usdeur.js"></script>
JavaScript
$(function() {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
id: 'dataseries',
data: usdeur
}, {
type: 'flags',
data: [{
x: Date.UTC(2011, 2, 1),
text: 'Shape: "circlepin"'
}, {
x: Date.UTC(2011, 3, 1),
text: 'Shape: "circlepin"'
}],
shape: 'circlepin',
title: 'I',
width: 16,
color: '#5F86B3',
fillColor: '#5F86B3',
style: { // text style
color: 'white',
textAlign: 'center'
},
states: {
hover: {
fillColor: '#395C84' // darker
}
}
}]
});
});