JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container"></div>
JavaScript
var chartSeriesData=[];
var chartCatData=[];
var power=[48,50,56,57,58,59,62,69];
var time=['04:30','04:30','04:30','04:31','04:31','04:34','04:36','04:40'];
var hour = time[0].substring(0,2);
var minute = time[0].slice(-2);
Highcharts.chart('container', {
title: {text: ''},
subtitle: {text: ''},
yAxis: {
title: {text: ''}
// ,min: 0, max: 0.010
},
xAxis: [{
type: 'datetime',
title: {
text: ''
},
labels: {
format: '{value:%H:%M}',
}
}],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
}
},
line: {
dataLabels: {
enabled: false
},
enableMouseTracking: false
}
},
series: [
{
name: ' ',
data: power,
pointStart: Date.UTC(0, 0, 0, hour, minute),
pointInterval: 30 * 1000
}
],
...