JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
var arry_kwh = [ {x: Date.now(), y: 100},
{x: Date.now()+1000, y: 120 },
{x: Date.now()+2000, y: 140 },
{x: Date.now()+3000, y: 165 },
{x: Date.now()+4000, y: 120 },
{x: Date.now()+5000, y: 110 },
{x: Date.now()+6000, y: 90 }];
var arry_kwh_diff = [];
var i=0;
for(; i < arry_kwh.length - 1; i++) {
arry_kwh_diff[i] = {x: arry_kwh[i].x, y:arry_kwh[i+1].y - arry_kwh[i].y};
}
arry_kwh_diff[i] = {x: arry_kwh[i].x, y:arry_kwh[i].y};
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column',
zoomType: 'xy',
panning: true,
panKey: 'shift',
//type: 'column',
//zoomType: 'xy',
//panning: true,
//pankey: 'shift',
resetZoomButton: {
position: {
//align: 'right', // by default
//verticalAlign: 'top', // by default
x: -10,
y: 350,
//height: 25
},
relativeTo: 'chart'
}
},
scrollbar:{
enabled: true
},
navigator: {
//xAxis: {
// tickWidth: 0,
// lineWidth: 0,
// gridLineWidth: 1,
// tickPixelInterval: 200,
// labels: {
// align: 'left',
// style: {
// color: '#888'
// },
// x: 3,
// y: -4
// }
//},
//yAxis: {
// gridLineWidth: 0,
// startOnTick: false,
// endOnTick: false,
// minPadding: 0.1,
// maxPadding: 0.1,
// labels: {
// ...