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>

JavaScript

window.onload = function () {
  var indexLabels = [];
  var chart = new CanvasJS.Chart("chartContainer", {
    title:{
      text: "Hide IndexLabel for Smaller Screen"
    },
    data:[
      {
        type: "stackedBar100",
        indexLabel: "{y}",
        dataPoints: [
          { y: 600 },
          { y: 400 },
          { y: 120 },
          { y: 250 },
          { y: 120 },
          { y: 374 },
          { y: 350 }
        ]
      },
      {
        type: "stackedBar100",
        indexLabel: "{y}",
        dataPoints: [
          { y: 400 },
          { y: 500 },
          { y: 220 },
          { y: 350 },
          { y: 220 },
          { y: 474 },
          { y: 450 }
        ]
      },
      {
        type: "stackedBar100",
        indexLabel: "{y}",
        dataPoints: [
          { y: 300 },
          { y: 610 },
          { y: 215 },
          { y: 221 },
          { y: 75 },
          { y: 310 },
          { y: 340 }
        ]
      }
    ]

  });

  var data = chart.options.data;
  for(var i = 0; i < data.length; i++) {
    indexLabels.push(data[i].indexLabel)
  }

  hideIndexLabel();
  chart.render();

	window.addEventListener("resize", hideIndexLabel);

  function hideIndexLabel() {
    var windowWidth = window.innerWidth;
    for(var i=0; i<data.length; i++) {
      //Index Labels will be hidden for screen-width lessthan 576px
      data[i].indexLabel =  windowWidth < 576 ?  null : indexLabels[i];
    }
  }
}