score:3

Accepted answer

this behaviour is fixed in v3 of the lib

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>


Related Query