JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 1000px;overflow:visible;"></div>
</body>
</html>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
    {
      title: {
        text: "Custom Labels on X Axis "
      },
      zoomEnabled: true,
            axisX: {
                crosshair: {
                    enabled: true,
                    snapToDataPoint: true
                }
            },
		data: [
      {
        type: "line",
        dataPoints: [

        { y: 71, x:1, label: "0"},
        { y: 55, x:2, label: "0.56"},
        { y: 50, x:3, label: "0.56"},
        { y: 65, x:4, label: "0.56"},
        { y: 95, x:5, label: "1"},
        { y: 68, x:6, label: "1"},
        { y: 28, x:7, label: "5"},
        { y: 34, x:8, label: "5"},
        { y: 14, x:9, label: "11"}
        ]
      },
      {
        type: "line",
        dataPoints: [
        { y: 50, x:2, label: "0.56"},
        { y: 45, x:3, label: "0.56"},
        { y: 60, x:4, label: "0.56"},
        { y: 90, x:5, label: "1"},
        { y: 63, x:6, label: "1"},
        { y: 23, x:7, label: "5"},
        { y: 29, x:8, label: "5"},
        { y: 9, x:9, label: "11"}
        ]
      }
      
      ]
    });

    chart.render();