Formatting Date Time Values in Charts - 1 | JSFiddle Sample Code

Formatting Date Time Values in Charts - 1 | JSFiddle Sample Code

by Nayana Das

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/formatting-date-time/" target="_blank" title="Formatting Date Time Values in Charts ">https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/formatting-date-time/</a></div>

JavaScript

window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer",
	{
		title: {
			text: "Using formatDate inside Custom Formatter"
		},
		axisX: {
    valueFormatString: "YYYY-MM-DD HH:mm:ss",
			labelFormatter: function (e) {
      	var d = new Date(e.value);
				return ("00" + (d.getMonth() + 1)).slice(-2) + "/" +
  ("00" + d.getDate()).slice(-2) + "/" +
  d.getFullYear() + " " +
  ("00" + d.getHours()).slice(-2) + ":" +
  ("00" + d.getMinutes()).slice(-2) + ":" +
  ("00" + d.getSeconds()).slice(-2);
			},
		},
		
		data: [
		{
    	xValueType: "dateTime",
			type: "spline",
			dataPoints:  [{"x":1609311600000,"y":1.6940677966101696}]
		}
		]                      
	});
	chart.render();
}