JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/charts/chart-types/html5-line-chart/" target="_blank" title="HTML5 &amp; JS Line Chart ">https://canvasjs.com/docs/charts/chart-types/html5-line-chart/</a></div>

JavaScript

var chart=new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Revenue",
  },
  animationEnabled: true,
  axisY: {
    title: "Company Based Revenue"
  },
  legend: {
    verticalAlign: "bottom",
    horizontalAlign: "center"
  },
  data: [
    {
      type: "column",
      showInLegend: true,
      legendMarkerColor: "grey",
      legendText: "Currency in Rupees(\u20B9)",
      indexLabel: "\u20B9{y}",
      dataPoints: [
      {y: 297571, label: "SD1"},
    {y: 267017, label: "SD2" },
    {y: 175200, label: "SD3"},
    {y: 154580, label: "SD4"},
    {y: 116000, label: "SD5"},
    {y: 97800, label: "SD6"},
    {y: 20682, label: "SD7"},
    {y: 20350, label: "SD10"}
  ]
}]
});
chart.render();