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: 600px"></div>
JavaScript
var seriesData = [],
n = [],
nLocation;
$(function() {
if (location.search != '') {
var queryObj = {};
for (var i in location.search.substring(1).split('&')) {
queryObj[location.search.substring(1).split('&')[i].split('=')[0]] = location.search.substring(1).split('&')[i].split('=')[1];
};
};
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = [],
My_Color_Array = ['#999999', '#1B81E0', '#FF287B', '#5C368C', '#1B2E7D', '#FF0000', '#FFCA16', '#41BD58', '#FF8027'],
sColours = [];
//Highcharts.setOptions({colors:My_Color_Array});
//colors = Highcharts.getOptions().colors;
var dataUrl = 'http://moneysupply.ftdata.co.uk/JSONP/data.php?format=json&diagnostics=true&callback=?';
$.getJSON(dataUrl, function(data) {
var t = [],
c = 0,
p = 0;
var sData = [];
sData[c] = [];
if (location.search != '') {
var cArr = queryObj.countries.split(',');
}
$(data.query.ds).each(function(j) {
// this will be the default setting
if (c != parseInt(data.query.ds[j].id - 1)) {
c = data.query.ds[j].id - 1;
sData[c] = [];
n[data.query.ds[j].id - 1] = (data.query.ds[j].centralBank + ' - ' + data.query.ds[j].rateName);
}
var dArr = data.query.ds[j].date.split('-');
if (dArr[0] > 1999) {
var x = Date.UTC(dArr[0], (dArr[1] - 1), dArr[2]);
sData[c].push([x, parseInt(data.query.ds[j].rate)]);
}
});
if (location.search != '') {
for (i = 0; i < cArr.length; i++) {
//names.push(n[cArr[i]]);
names.push('');
seriesData.push(sData[cArr[i]]);
sColours.push(My_Color_Array[cArr[i]])
}
Highcharts.setOptions({
colors:...