intervalType - Sets the Unit of Interval on Axis X - 0 | JSFiddle Sample Code

intervalType - Sets the Unit of Interval on Axis X - 0 | JSFiddle Sample Code

by nehamahajan

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/chart-options/axisx/intervaltype/" target="_blank" title="intervalType - Sets the Unit of Interval on Axis X ">https://canvasjs.com/docs/charts/chart-options/axisx/intervaltype/</a></div>

JavaScript

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
        text: "Date time axis with 1 day interval for a single month"
      },
      axisX:{
        viewportMinimum: 1664596800000,
        viewportMaximum: 1666411200000,
        intervalType: "day",
        tickThickness: 1,
        tickLength: 10,
        labelAutoFit: true,
        gridColor: '#e6e6e6',
        labelFontColor: '#666666',
        labelFontSize: 10.5,
        labelFontWeight: "normal",
        labelFontFamily: '\"Open Sans\", Helvetica, Arial, sans-serif',
        labelFormatter: function (e) {
          return CanvasJS.formatDate( e.value, "DD MMM");
        },
      },
      data: [
      {
        type: "line",
        dataPoints: [
        {
         x: new Date(2022, 09, 1),
         y: 26,
       },
       {
         x: new Date(2022, 09, 2),
         y: 38
       }, {
         x: new Date(2022, 09, 3),
         y: 43,

       }, {
         x: new Date(2022, 09, 4),
         y: 29,

       }, {
         x: new Date(2022, 09, 5),
         y: 41,

       }, {
         x: new Date(2022, 09, 6),
         y: 54,

       }, {
         x: new Date(2022, 09, 7),
         y: 66,

       }, {
         x: new Date(2022, 09, 8),
         y: 60,

       },{
         x: new Date(2022, 09, 9),
         y: 53,

       },{
         x: new Date(2022, 09, 10),
         y: 60,
       },{
         x: new Date(2022, 09, 11),
         y: 60,
       },{
         x: new Date(2022, 09, 12),
         y: 60,
       },{
         x: new Date(2022, 09, 13),
         y: 60,
       },{
         x: new Date(2022, 09, 14),
         y: 60,
       },{
         x: new Date(2022, 09, 15),
         y: 60,
       },{
         x: new Date(2022, 09, 16),
         y: 60,
       },{
         x: new Date(2022, 09, 17),
         y: 60,
       },{
         x: new Date(2022, 09, 18),
         y: 60,
       },{
         x: new Date(2022, 09, 19),
         y: 60,
       },{
         x:...