JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

chart = new CanvasJS.Chart('chartContainer',
                           {
  title: {
    text: 'PAS Process TAT',
    fontColor: '#2C4B5D'
  },
  axisX: {
    //valueFormatString: 'MM/DD/YYYY',
    //labelFontWeight: 'bold'
  },

  toolTip: {
    shared: true
  },
  legend: {
    horizontalAlign: 'center',
    verticalAlign: 'bottom',
    fontWeight: 'bold',
    fontSize: 23,
    fontColor: '#2C4B5D'

  },
  data: [
    {
      type: 'stackedBar',
      name: '<=4Hrs',
      showInLegend: true,
      color: '#77a033', /*'#4978B1″*/
      indexLabelFontSize: 15,
      indexLabelFontColor: 'black',
      indexLabelFontWeight: 'bold',
      dataPoints: [
        { label: CanvasJS.formatDate(new Date(2020, 01, 1), "MMM DD YYYY"), y: 71 },
        { label: CanvasJS.formatDate(new Date(2020, 02, 1), "MMM DD YYYY"), y: 55}

      ]
    }

  ]
});

chart.render();