JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      zoomEnabled: true,
      title:{
      text: "Coal Reserves of Countries"
      },
      axisX: {
        viewportMaximum: 5
      },
        data: [
      {
        type: "stackedColumn",
        dataPoints: [
        {  y: 111338 , label: "USA"},
        {  y: 49088, label: "Russia" },
        {  y: 62200, label: "China" },
        {  y: 90085, label: "India" },
        {  y: 38600, label: "Australia"},
        {  y: 48750, label: "SA"},
         {  y: 111338 , label: "USA"},
        {  y: 49088, label: "Russia" },
        {  y: 62200, label: "China" },
        {  y: 90085, label: "India" },
        {  y: 38600, label: "Australia"},
        {  y: 48750, label: "SA"}

        ]
      },  {
        type: "stackedColumn",
         dataPoints: [
        {  y: 135305 , label: "USA"},
        {  y: 107922, label: "Russia" },
        {  y: 52300, label: "China" },
        {  y: 3360, label: "India" },
        {  y: 39900, label: "Australia"},
        {  y: 0, label: "SA"},
        {  y: 135305 , label: "USA"},
        {  y: 107922, label: "Russia" },
        {  y: 52300, label: "China" },
        {  y: 3360, label: "India" },
        {  y: 39900, label: "Australia"},
        {  y: 0, label: "SA"}

        ]
      }
      ]
    });

    chart.render();
  }
  </script>
 <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>
</html>