How to make customized stepSize for each horizontal bar in Chart.js graph

I have implemented a graph with four horizontal bars. Last one has nearly 35k records so the stepSize automatically is 2250. The first bar has only 20 records.

First bar's 20 records are not showing any color as the numbers are less at compare to stepSize 2250.

This is my code

scales: {
    xAxes: [
      {
        ticks: {
          beginAtZero: true,
          stepSize: 50,

        },
        stacked: true
      }
    ],
    yAxes: [
      {
        ticks: {
          fontSize: 12
        },
        stacked: true
      }
    ]
  },
  
animation: {
onComplete: function() {
  var chartInstance = this.chart;
  var ctx = chartInstance.ctx;
  ctx.textAlign = "left";
  ctx.fillStyle = "#fff";    
    //draw total count
    charData.datasets[0].data.forEach(function(data, index) {
    var total = this.data.datasets[0].data[index];
    var meta = chartInstance.controller.getDatasetMeta(0);
    var posX = meta.data[index]._model.x;
    var posY = meta.data[index]._model.y;
    ctx.fillStyle = "black";
    if(total.toString().length>=5)
    ctx.fillText(total, posX -40, posY + 2);
    else if(total==0)
    ctx.fillText(total, posX -4, posY + 4);
    else
    ctx.fillText(total, posX - 10, posY + 4);

  }, this);
}

This is output

How can I fix this issue?

from How to make customized stepSize for each horizontal bar in Chart.js graph