[Solved]-Why are these 2.9 ChartJS bar charts different?-Chart.js

var leftdata = {
  labels: [0, 1, 2, 3, 4, 5],
  datasets: [{
      label: "A",
      backgroundColor: 'rgba(0, 0, 255, 0.5)',
      data: [12, 19, 3, 5, 1],
      xAxisID: "A"
    },
    {
      label: "B",
      backgroundColor: 'rgba(0, 255, 0, 0.5)',
      data: [14, 19, 6, 2, 4],
      xAxisID: "B"
    }
  ]
};

var rightdata = {
  labels: [0, 1, 2, 3, "4", 5], // the #4 being a string is the only difference
  datasets: [{
      label: "A",
      backgroundColor: 'rgba(0, 0, 255, 0.5)',
      data: [12, 19, 3, 5, 1],
      xAxisID: "A"
    },
    {
      label: "B",
      backgroundColor: 'rgba(0, 255, 0, 0.5)',
      data: [14, 19, 6, 2, 4],
      xAxisID: "B"
    }
  ]
};

var options = {
  scales: {
    A: {
      display: false,
      barPercentage: 1.25,
      ticks: {
        max: 4
      },
      position: 'bottom'
    },
    B: {
      display: false,
      stacked: true,
      offset: true,
      barPercentage: 1.25,
      position: 'bottom',
      ticks: {
        max: 4
      }
    },
    x: {
      display: true,
      ticks: {
        autoSkip: false,
        max: 5
      }
    },

    y: {
      id: "bar-y-axis1",
      ticks: {
        beginAtZero: true
      }
    }

  }
};

var leftctx = document.getElementById("topcanvas").getContext("2d");
new Chart(leftctx, {
  type: 'bar',
  data: leftdata,
  options: options
});
var rightctx = document.getElementById("bottomcanvas").getContext("2d");
new Chart(rightctx, {
  type: 'bar',
  data: rightdata,
  options: options
});

<div class="grid">
  <canvas id="topcanvas"></canvas>
  <canvas id="bottomcanvas"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js" integrity="sha512-opXrgVcTHsEVdBUZqTPlW9S8+99hNbaHmXtAdXXc61OUU6gOII5ku/PzZFqexHXc3hnK8IrJKHo+T7O4GRIJcw==" crossorigin="anonymous"></script>
</div>