Display line chart with UTC time axis
Basic Column Chart
HTML
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
// Helper function to format time in UTC
function formatDateToUTC(date) {
var year = date.getUTCFullYear();
var month = ("0" + (date.getUTCMonth() + 1)).slice(-2);
var day = ("0" + date.getUTCDate()).slice(-2);
var hours = ("0" + date.getUTCHours()).slice(-2);
var minutes = ("0" + date.getUTCMinutes()).slice(-2);
var seconds = ("0" + date.getUTCSeconds()).slice(-2);
return `${hours}:${minutes}:${seconds} UTC`;
}
var chart = new CanvasJS.Chart("chartContainer", {
axisX: {
title: "Time",
labelFormatter: function(e) {
var date = new Date(e.value);
return formatDateToUTC(date);
}
},
toolTip: {
contentFormatter: function(e) {
var date = new Date(e.entries[0].dataPoint.x);
return formatDateToUTC(date) + "<br>Value: " + e.entries[0].dataPoint.y;
}
},
data: [{
type: "line",
dataPoints: [
{ x: new Date("2025-03-30T01:40Z"), y: 71 },
{ x: new Date("2025-03-30T01:45Z"), y: 55 },
{ x: new Date("2025-03-30T01:50Z"), y: 50 },
{ x: new Date("2025-03-30T01:55Z"), y: 65 },
{ x: new Date("2025-03-30T02:00Z"), y: 95 },
{ x: new Date("2025-03-30T02:05Z"), y: 68 },
{ x: new Date("2025-03-30T02:10Z"), y: 28 },
{ x: new Date("2025-03-30T02:15Z"), y: 34 },
{ x: new Date("2025-03-30T02:20Z"), y: 14 }
]
}]
});
chart.render();