JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://hosting.octavient.net/cdn/highstock/highstock.js"></script>
<div id="chart_1" class="chart chart_magmonitor_01"></div>
JavaScript
var magmonitor = magmonitor || {};
magmonitor.chart = {};
$.getJSON('http://hosting.octavient.net/cdn/sample_chart_data.aspx', function(response){
$("div").append(response.data.length);
magmonitor.current_dataset = response.data;
magmonitor.chart['HEL'] = [];
magmonitor.chart['HEP'] = [];
magmonitor.chart['CHR'] = [];
magmonitor.chart['RR'] = [];
magmonitor.chart['CS1'] = [];
$(magmonitor.current_dataset).each(function () {
var dt = Date.parse(this['dt']);
magmonitor.chart['HEL'].push([dt, this['a']]);
magmonitor.chart['HEP'].push([dt, this['c']]);
magmonitor.chart['CHR'].push([dt, this['b']]);
magmonitor.chart['RR'].push([dt, this['d']]);
magmonitor.chart['CS1'].push([dt, this['e']]);
});
window.chart = new Highcharts.StockChart({
chart: { renderTo: 'chart_1' },
rangeSelector: {
selected: 0
},
navigator: {
adaptToUpdatedData: false,
},
scrollbar: {
liveRedraw: false
},
subtitle: {
text: magmonitor.chart_subtitle,
align: "left",
style: { "font-size": "14px" }
},
// /////////////////////////////
// y-axis: HEL
yAxis: [{
labels: {
align: 'left', x: 2, format: '{value} %'
},
plotBands: [{
from: 0, to: 50000, color: '#f5f5f5'
}],
title: {
text: 'HEL', style: { "font-weight": "bold" }, align: 'high', rotation: 0, offset: -25, y: -5
},
top: '5%', height: '30%', lineWidth: 2, opposite: false, offset: 0, labels: { enabled: false }
},
// /////////////////////////////
// y-axis: HEPCR
{
plotBands: [{
from: 0, to: 50000, color: '#ebebeb'
}],
title: {
text: 'HEPCR', style: { "font-weight": "bold" }, align: 'high', rotation: 0, offset: -40, y: -5
},
floor: -20, ceiling: 150,
top: '45%', height: '30%', lineWidth: 2, opposite: false, offset: 0, labels: { enabled: false }
},
// /////////////////////////////
// y-axis: CS1
{
plotBands: [{
from: -20, to: 50000, color: '#f5f5f5'
}],
title:...