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

var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
        text: "Showing all labels??"
      },
      axisX:{
        minimun: 28,
        interval: 1  //setting interval as 1 will show all the labels irrespective of screen size
      },
     data: [
     {
      dataPoints: [
      {label: "AB", y: 230},
                  {label: "AA", y: 245},
                  {label: "BB", y: 345},
                  {label: "CC", y: 367},
                  {label: "DD", y: 453},
                  {label: "EE", y: 256},
                  {label: "FF", y: 478},
                  {label: "GG", y: 543},
                  {label: "HH", y: 456},
                  {label: "II", y: 230},
                  {label: "JJ", y: 245},
                  {label: "KK", y: 345},
                  {label: "LL", y: 367},
                  {label: "MM", y: 453},
                  {label: "NN", y: 256},
                  {label: "OO", y: 478},
                  {label: "PP", y: 543},
                  {label: "QQ", y: 456},
                  {label: "RR", y: 230},
                  {label: "SS", y: 245},
                  {label: "TT", y: 345},
                  {label: "UU", y: 367},
                  {label: "VV", y: 453},
                  {label: "XX", y: 256},
                  {label: "WW", y: 478},
                  {label: "YY", y: 543},
                  {label: "ZZ", y: 456},
                  {label: "AZ", y: 543}
      ]
    }
    ]
  });

    chart.render();