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

window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer",
                                 {
    title:{
      text: "Months do not align on multiple axis"
    },     
    toolTip: {
      shared: true
    },    
    axisX:[{
      crosshair: {
        enabled: true
      },
      title: 'Month ONE'
    },{
      crosshair: {
        enabled: true
      },      
      title: ' Month TWO'
    }],
    data: [{
      axisXIndex: 0,
      type: "line",
      dataPoints: [
        {
          label: CanvasJS.formatDate(new Date(2021, 0, 1), "MMM YYYY"),		 
          y: 1,
        },
        {
          label: CanvasJS.formatDate(new Date(2021, 1, 1), "MMM YYYY"),		
          y: 2
        },
        {
          label: CanvasJS.formatDate(new Date(2021, 2, 1), "MMM YYYY"),		
          y: 3,
        }
      ]
    },{
      axisXIndex: 1,
      type: "line",
      dataPoints: [
        {
          label: CanvasJS.formatDate(new Date(2021, 3, 1), "MMM YYYY"),		 
          y: 4,
        },
        {
          label: CanvasJS.formatDate(new Date(2021, 4, 1), "MMM YYYY"),		
          y: 5
        },
        {
          label: CanvasJS.formatDate(new Date(2021, 5, 1), "MMM YYYY"),		
          y: 6,
        },
      ]
    }]
  });
  chart.render();
}