JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/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 axisLabels = [0,4,8,12,17,18,19], stripLines = [];

var chart = new CanvasJS.Chart("chartContainer",{
  title:{
    text: "Chart Title"
  },
  axisY: {
    title:"Axis Y Title",
    labelFormatter: function(e){
      return "";
    },
    stripLines: stripLines,
    tickThickness: 0,
    gridThickness: 0
  },
  axisX:{
    title: "Axis X Title"
  },
  data: [
    {
      type: "line",
      dataPoints: [
        { x: 1, y: 16 },
        { x: 4, y: 7 },
        { x: 8, y: 3 },
        { x: 12, y: 15 },
        { x: 14, y: 4 },
        { x: 18, y: 19 },
        { x: 20, y: 17 },
        { x: 22, y: 11 }					
      ]
    }
  ]
});

for(var i = 0; i < axisLabels.length; i++){
  stripLines.push({
    value: axisLabels[i],
    label: axisLabels[i],
    thickness: 1,
    labelPlacement: "outside",
    labelFontColor: "black",
    color: "black",
    labelBackgroundColor: "trasparent"
  });              
}

chart.render();