Adding Minor Grids to axisY using Striplines - CanvasJS JavaScript Charts

Adding Minor Grids to axisY using Striplines - CanvasJS JavaScript Charts

by canvasjs

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"
  },
  axisY: {
  	minorGridInterval: 10
  },
  data: [{
  		type: "line",
      dataPoints: [
        { y: 29.9 },
        { y: 71.5 },
        { y: 106.4 },
        { y: 129.2 },
        { y: 144.0 },
        { y: 176.0 },
        { y: 135.6 },
        { y: 148.5 },
        { y: 216.4 },
        { y: 194.1 },
        { y: 95.6 },
        { y: 54.4 }

]
    }]
});

chart.render();
addMinorGrids(chart);

function addMinorGrids(chart) {
		var axisY = chart.axisY[0]; 
    var j = axisY.get("minimum");
    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);
        }
    }
}