JSFiddle - React, Tailwind, and code Playground

by canvasjs

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,
                    labelFormatter: function(e) {
                    	if(e.chart.data[0].dataPoints[e.value - 1].label)
                      		return e.chart.data[0].dataPoints[e.value - 1].label;
                     
                     return e.value;
                    }
                }
            },
		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();