JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
JavaScript
var localeOptions = {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
timeZone: "UTC",
timeZoneName: "short",
hour12: false
};
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Simple Date-Time Chart"
},
axisX: {
interval: 30, //here 30 indicates 30 minutes, change to 15 for 15 minutes
labelAngle: 0
},
data: [
{
type: "area",
dataPoints: [
{
"time": 1601006400003,
"y": 0.004
},
{
"time": 1601007299997,
"y": 0.003
},
{
"time": 1601008200000,
"y": 0.003
},
{
"time": 1601009100003,
"y": 0.003
},
{
"time": 1601009999997,
"y": 0.003
},
{
"time": 1601010900000,
"y": 0.004
},
{
"time": 1601011800003,
"y": 0.005
},
{
"time": 1601012699997,
"y": 0.005
},
{
"time": 1601013600000,
"y": 0.006
},
{
"time": 1601014500003,
"y": 0.008
}
]
}
]
});
var dataPoints = chart.options.data[0].dataPoints;
//converting timestamp values to UTC time
for(var i = 0; i < dataPoints.length; i++){
let date = new Date(dataPoints[i].time);
dataPoints[i].label = date.toLocaleDateString("en-US", localeOptions);
dataPoints[i].x = i * 15; //15 minutes is average difference between timestamp values
}
chart.render();