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: "Striplines between Datapoints"
  },
  dataPointWidth: 30,
  axisY: {
    includeZero: true
  },
  data: [
    {
      type: "bar",
      dataPoints: [
        { y: 350 },
        { y: 365 },
        { y: 379 },
        { y: 360 },
        { y: 395 },
        { y: 387 }
      ]
    }
  ]
});

chart.render();
addStripLines();

function addStripLines() {
  var dataPoints  = chart.options.data[0].dataPoints;

  for(var i = 1; i < dataPoints.length; i++) {    
    chart.axisX[0].addTo("stripLines", {
      value: dataPoints[i].x - (dataPoints[i].x - dataPoints[i-1].x) / 2,
      showOnTop: true,
      color: "black",
      thickness: 1,
      labelPlacement: "outside"
    }, false)
  }  

  chart.render();
}