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 buildChart(data){
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
colors = Highcharts.getOptions().colors;
dataLength = data[0].length;
var today = data[0][dataLength-1][0];
var namearray = new Array();
for(var i = 0; i < data.length; i++){
var dataarray = new Array();
for(var j = 0; j < data[i].length; j++){
dataarray[j] = new Array();
dataarray[j][0] = data[i][j][0]; //TS
dataarray[j][1] = data[i][j][2]; //END VALUE
namearray[i] = data[i][j][data[i][j].length-2]; //DESCRIPTION
}
seriesOptions[i] = {
name: namearray[i],
data: dataarray
};
console.log(seriesOptions);
// 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 == data.length) {
createChart();
}
};
// create the chart when all data is loaded
function createChart() {
var options = {
chart: {
renderTo: 'line'
},
title: {
text: $(".item.selected td").first().text()
},
rangeSelector : {
buttons: [{
type: 'month',
count: 1,
text: '1M'
}, {
type: 'month',
count: 6,
text: '6M'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'all',
text: 'All'
}],
selected : 2 // year
},
series: [{
data: seriesOptions[0].data,
type: "area"
}]
}
/* for(var i =0;i <= seriesOptions.length-1;i++)
{
var item = seriesOptions[i];
options.addSeries({
"type":...