JSFiddle - React, Tailwind, and code Playground

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

var dps = [], xVal = new Date(2020, 0, 1);
for(var i = 0; i < 90; i++) {//Random Data
  dps.push({ x: xVal, y: Math.floor(Math.random() * (100 - 50) + 50) })
  xVal = new Date(xVal.getTime() + (24 * 60 * 60 * 1000))
}

var chart = new CanvasJS.Chart("chartContainer", {
  axisX: [{
  }, {
    tickThickness: 0,
    labelFormatter: function(e) {
      return "";
    }
  }, {
    tickThickness: 0,
    labelFormatter: function(e) {
      return "";
    }
  }],
  data: [{
    type: "stackedColumn",
    dataPoints: dps
  }]
});

chart.render();

for(var i = 1; i < chart.axisX.length; i++) {
  chart.axisX[i].set("minimum", chart.axisX[0].get("minimum"), false);
  chart.axisX[i].set("maximum", chart.axisX[0].get("maximum"), false);
}
chart.render();

addStripLines(chart, 1, "week");
addStripLines(chart, 2, "month");
chart.render()

function addStripLines(chart, axisXIndex, interval) {
  if(!chart.options.axisX[axisXIndex].stripLines)
    chart.options.axisX[axisXIndex].stripLines = [];

  var index = 1;
  var dayInMilliseconds = 24 * 60 * 60 * 1000;
  var offset = interval === "week" ? 3.5 : 15;
  var noOfDays = interval === "week" ? 7 : 30;

  for(var i = chart.axisX[axisXIndex].minimum + (offset * dayInMilliseconds); i < chart.axisX[axisXIndex].maximum; i += (noOfDays * dayInMilliseconds)) {
    chart.options.axisX[axisXIndex].stripLines.push({ value: i, label: (interval.charAt(0).toUpperCase() + interval.slice(1) + " " + index++), labelPlacement: "outside", thickness: 0, color: "black", labelFontColor: "black", labelBackgroundColor: "white" });
  }
}