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", {
zoomEnabled: true,
axisX: {
valueFormatString: "YYYY-MM-DD HH:mm K",
labelFormatter: function(e) {
let date = new Date(e.value);
let content = date.toLocaleDateString("en-US", localeOptions);
return content;
}
},
toolTip: {
contentFormatter: function(e){
let date = new Date(e.entries[0].dataPoint.x);
let content = date.toLocaleDateString("en-US", localeOptions);
return content + ": " + e.entries[0].dataPoint.y;
}
},
data: [
{
type: "area",
xValueType: "dateTime",
dataPoints: [
{
"x": 1601006400003,
"y": 0.004
},
{
"x": 1601007299997,
"y": 0.003
},
{
"x": 1601008200000,
"y": 0.003
},
{
"x": 1601009100003,
"y": 0.003
},
{
"x": 1601009999997,
"y": 0.003
},
{
"x": 1601010900000,
"y": 0.004
},
{
"x": 1601011800003,
"y": 0.005
},
{
"x": 1601012699997,
"y": 0.005
},
{
"x": 1601013600000,
"y": 0.006
},
{
"x": 1601014500003,
"y": 0.008
}
]
}
]
});
chart.render();