JSFiddle - React, Tailwind, and code Playground

HTML

<script   src="https://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>


 <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="per_crime_yr_mon" style="height: 360px; width: 100%;"></div>

JavaScript

//Stacked SERIOUS Crime by Month
var chart = new CanvasJS.Chart("per_crime_yr_mon", {
  exportEnabled: true,
  animationEnabled: true,
  title:{
    text: "Serious Personal Crime for last three Decembers's'",
    fontSize: 24,
  },
  axisX: {
    title: "Year",
    labelFontSize: 12,
    titleFontSize: 20,
    reversed: true,
    //	interval: 12,
    //intervalType: "month",
  },
  axisY:{
    gridColor: "#B6B1A8",
    tickColor: "#B6B1A8"
  },
  toolTip: {
    shared: true,
    content: toolTipContent
  },
  data: [{
    type: "stackedColumn",
    showInLegend: true,
    //color: "#4F81BC",
    name: "Robberies",
    indexLabel: "{y}",
    indexLabelFontColor: "#FFFFFF",
    indexLabelPlacement: "inside",
    indexLabelFontSize: 12,
    dataPoints: [
      { y: 5, x: 2018, label: "2018 - December" },
      { y: 5, x: 2019, label: "2019 - December" },
      { y: 6, x: 2020, label: "2020 - December" }
    ]
  }, {        
    type: "stackedColumn",
    showInLegend: true,
    name: "Sexual Assaults",
    color: "#c24642",
    indexLabel: "{y}",
    indexLabelFontColor: "#FFFFFF",
    indexLabelPlacement: "inside",
    indexLabelFontSize: 12,
    dataPoints: [			
      { y: 4, x: 2018, label: "2018 - December" },
      { y: 1, x: 2020, label: "2020 - December" },
    ]
  }, {        
    type: "stackedColumn",
    showInLegend: true,
    name: "Aggravated Assaults",
    //color: "#c24642",
    indexLabel: "{y}",
    indexLabelFontColor: "#FFFFFF",
    indexLabelPlacement: "inside",
    indexLabelFontSize: 12,
    dataPoints: [			
      { y: 7,  x: 2018, label: "2018 - December" },			
      { y: 12,  x: 2019, label: "2019 - December" },
      { y: 5,  x: 2020, label: "2020 - December" },	
    ]
  }, {        
    type: "stackedColumn",
    showInLegend: true,
    name: "Homicide",
    //color: "#c24642",
    indexLabel: "{y}",
    indexLabelFontColor: "#FFFFFF",
    indexLabelPlacement: "inside",
    indexLabelFontSize: 12,
    dataPoints: [
      { y: 2, x: 2020,...