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 buildLineChart(data){
var currentDate = new Date();
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
colors = Highcharts.getOptions().colors;
dataLength = data[0].length;
var today = data[0][dataLength-2][0];
var informationarray = new Array();
for(var i = 0; i < data.length; i++){
var dataarray = new Array();
informationarray[i] = new Array();
informationarray[i][0] = data[i][data[i].length-1][0]; //DESCRIPTION
informationarray[i][1] = data[i][data[i].length-1][1]; //MAX
informationarray[i][2] = data[i][data[i].length-1][2]; //MIN
//data[i].length-1 because curve informations isset at the last element of the array
for(var j = 0; j < data[i].length-1; j++){
dataarray[j] = new Array();
dataarray[j][0] = data[i][j][0]; //TS
dataarray[j][1] = data[i][j][1]; //END VALUE
}
seriesOptions[i] = {
name: informationarray[i][0],
data: dataarray,
yAxis: informationarray[i][0]
};
console.log(informationarray);
yAxisOptions[i] = {
id: informationarray[i][0],
min: informationarray[i][2]
};
// 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() {
chart = new Highcharts.StockChart({
chart: {
renderTo: container
},
title: {
text: $(".item.selected td").first().text()
},
xAxis : {
plotLines:[{
value: today,
color: '#ff0000',
dashStyle: 'solid',
width: 2,
zIndex: 5,
label : {
text : 'Today, '+currentDate.getDate()+"."+(currentDate.getMonth()+1)+"."+currentDate.getFullYear(),
style: {
color: '#ff0000'
},
x:...