JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://highcharts.com/js/testing.js"></script>
<div id="chartArea" style="background-color:#FFF;width:100%;">
JavaScript
var BPd = [];
var BPs = [];
var pulse = [];
var hgb = [];
var mcv = [];
var iron = [];
var flags = [];
var prbcs = [];
var transfusionStarts = [];
var transfusionStops = [];
var admissions = [];
admissions.push({
x: 1300636800000,
title: 'PA',
text: 'Patient Admitted'
});
admissions.push({
x: 1300723200000,
title: 'PD',
text: 'Patient Discharged'
});
BPd.push({
x: 1300640400000,
y: 85,
id: 'row' + 148
});
BPs.push({
x: 1300640400000,
y: 110,
id: 'row' + 148
});
BPd.push({
x: 1300640700000,
y: 80,
id: 'row' + 149
});
BPs.push({
x: 1300640700000,
y: 100,
id: 'row' + 149
});
prbcs.push({
from: 1300641600000,
to: 1300644000000,
label: {
text: 'PRBC'
},
color: 'rgba(68, 170, 213, .2)'
})
var chart;
window.chart = new Highcharts.StockChart({
chart: {
zoomType: 'x',
defaultSeriesType: 'scatter',
renderTo: 'chartArea'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 6,
text: '6h'},
{
type: 'hour',
count: 12,
text: '12h'},
{
type: 'hour',
count: 24,
text: '24h'},
{
type: 'all',
count: 1,
text: 'All'}],
selected: 2,
inputEnabled: false
},
title: {
text: 'PRBC Tranfusion Chart'
},
xAxis: {
maxZoom: 3600000,
// one hour
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
hour: '%H:%M',
day: '%e. %b',
month: '%e. %b',
year: '%b'
},
plotBands: prbcs
},
yAxis: [
{
title: {
text: 'HGB',
style: {
...