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: "Dynamic Index Label Orientation"
  },

  data: [
    {
      type: "column",
      indexLabelPlacement: "outside",
      indexLabel: "{y}",
      dataPoints: [ // <15 datapoints
        {  y: 596, label: "NorthEast"},
        {  y: 448, label: "MidWest"},
        {  y: 393, label: "South"},
        {  y: 377, label: "West"}
      ]
      
      /* dataPoints: [ //uncomment this for >15 datapoints
        {  y: 596, label: "NorthEast"},
        {  y: 448, label: "MidWest"},
        {  y: 393, label: "South"},
        {  y: 377, label: "West"},
        {  y: 596, label: "NorthEast"},
        {  y: 448, label: "MidWest"},
        {  y: 393, label: "South"},
        {  y: 377, label: "West"},
        {  y: 596, label: "NorthEast"},
        {  y: 448, label: "MidWest"},
        {  y: 393, label: "South"},
        {  y: 377, label: "West"},
        {  y: 596, label: "NorthEast"},
        {  y: 448, label: "MidWest"},
        {  y: 393, label: "South"},
        {  y: 377, label: "West"}
      ] */
    }
  ]
});


setIndexLabelOrientation();
chart.render();

function setIndexLabelOrientation() {
	if(chart.options.data[0].dataPoints.length > 15)
  	chart.options.data[0].indexLabelOrientation = "vertical";
  else
  	chart.options.data[0].indexLabelOrientation = "horizontal";
}