JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Minor Gridlines using Striplines"
  },
  axisX: {
  	minorGridInterval: 15 //15days
  },
  axisY: {
  	minorGridInterval: 10
  },
  data: [{
  		type: "line",
      dataPoints: [
        { x: new Date(2019, 00, 01), y: 29.9 },
        { x: new Date(2019, 01, 01), y: 71.5 },
        { x: new Date(2019, 02, 01), y: 106.4 },
        { x: new Date(2019, 03, 01), y: 129.2 },
        { x: new Date(2019, 04, 01), y: 144.0 },
        { x: new Date(2019, 05, 01), y: 176.0 },
        { x: new Date(2019, 06, 01), y: 135.6 },
        { x: new Date(2019, 07, 01), y: 148.5 },
        { x: new Date(2019, 08, 01), y: 216.4 },
        { x: new Date(2019, 09, 01), y: 194.1 },
        { x: new Date(2019, 10, 01), y: 95.6 },
        { x: new Date(2019, 11, 01), y: 54.4 }

]
    }]
});

chart.render();
addMinorGrids(chart);

function addMinorGrids(chart) {
		var axisX = chart.axisX[0],
				axisY = chart.axisY[0];    
    for(var i = axisY.get("minimum"); i < axisY.get("maximum"); i+=chart.options.axisY.minorGridInterval) {    
    		if(i % axisY.get("interval") != 0) {
            stripLine = { value: i, color: "grey", opacity: 0.6, thickness: 1, labelPlacement: "outside" };        
            chart.axisY[0].addTo("stripLines", stripLine);
        }
    }
    
    for(var i = axisX.get("minimum"); i < axisX.get("maximum"); i+=(chart.options.axisX.minorGridInterval * 24 * 60 * 60 * 1000)) {    	
    		if(i % (axisX.get("interval") * 30 * 24 * 60 * 60 * 1000) != 0) { //intervalType is month       
            stripLine = { value: new Date(i), color: "grey", opacity: 0.6, thickness: 1, labelPlacement: "outside" };        
            chart.axisX[0].addTo("stripLines", stripLine);
        }
    }
}