JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
                               {
  title:{
    text: "Date time axis with interval 3 months"
  },
  legend: {
    cursor: "pointer",
    itemclick: function (e) {
      if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
        e.chart.options.axisX2.interval = undefined;
        e.dataSeries.visible = false;
      } else {
        e.chart.options.axisX2.interval = 3;
        e.dataSeries.visible = true;
      }

      e.chart.render();
    }
  },
  axisX2:{
    interval: 3,
    intervalType: "month",
    minimum: new Date('2012, 03, 31'),
    maximum: new Date('2012, 11, 30')
  },
  data: [
    {
      type: "line",
      axisXType: "secondary",
      xValueType: "datetime",
      showInLegend: true,
      dataPoints: [//array
        {
          x: new Date(2012, 03, 1),
          y: 26,
        },
        {
          x: new Date(2012, 04, 3),
          y: 38
        }
        , {
          x: new Date(2012, 05, 5),
          y: 43,

        }, {
          x: new Date(2012, 06, 7),
          y: 29,

        }, {
          x: new Date(2012, 07, 11),
          y: 41,

        }, {
          x: new Date(2012, 08, 11),
          y: 54,

        }, {
          x: new Date(2012, 09, 23),
          y: 66,

        }, {
          x: new Date(2012, 10, 25),
          y: 60,

        },{
          x: new Date(2012, 11, 25),
          y: 53,

        },{
          x: new Date(2012, 12, 25),
          y: 60,
        }
      ]
    }
  ]
});
chart.render();