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,
      data: [
      {
        type: "line",
        dataPoints: [

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

    chart.render();