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: 600px"></div>
JavaScript
$(function() {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'],
colors = Highcharts.getOptions().colors;
seriesOptions.push({
type: 'flags',
name: 'Flags on series',
data: [{
x: Date.UTC(2011, 1, 14),
title: 'On series'}],
onSeries: 'MSFT',
shape: 'squarepin'
});
seriesOptions.push({
type: 'flags',
name: 'Flags on series',
data: [{
x: Date.UTC(2011, 1, 14),
title: 'On series'}],
onSeries: 'GOOG',
shape: 'squarepin'
});
seriesOptions.push({
type: 'flags',
name: 'Flags on series',
data: [{
x: Date.UTC(2011, 1, 14),
title: 'On series'}],
onSeries: 'AAPL',
shape: 'squarepin'
});
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=goog-c.json&callback=?', function(data) {
seriesOptions.push({
data: data
});
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
// create the chart when all data is loaded
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
series: seriesOptions
});
}
});