[Chartjs]-Chart.js horizontal stack bar not showing expcected result

by

1👍

✅

This is because you have a stacked x axis, this means that instead of the value starting at the origin it starts where the first bar ends. To resolve this issue you need to set the options.scales.x.stacked to false or dont set it since false is the default.

Example:

var todayStartTime = new moment('2022-10-19 08:00:00');
var todayEndTime = new moment('2022-10-19 15:00:00');

var options = {
  responsive: true,
  maintainAspectRatio: false,
  indexAxis: 'y',
  scales: {
    x: {
      offset: false,
      type: 'time',
      time: {
        unit: 'hour'
      },
      min: todayStartTime,
      max: todayEndTime
    },
    y: {
      stacked: true,
      offset: true
    }
  }
};
const data = {
  datasets: [{
      label: "T1" + moment(todayStartTime).add(0.5, 'hours'),
      data: [{
        x: moment(todayStartTime).add(0.5, 'hours'),
        y: 0
      }],
      backgroundColor: "red"
    },
    {
      label: "T2" + moment(todayStartTime).add(2, 'hours'),
      data: [{
        x: moment(todayStartTime).add(2, 'hours'),
        y: 0
      }],
      backgroundColor: "blue"
    },
    {
      label: "T3" + moment(todayStartTime).add(3, 'hours'),
      data: [{
        x: moment(todayStartTime).add(3, 'hours'),
        y: 0
      }],
      backgroundColor: "orange"
    },
  ]
};

const ctx = document.getElementById('myChart').getContext('2d');
const config = {
  type: 'bar',
  data,
  options
};

new Chart(ctx, config);
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>

<canvas id="myChart" width="600" height="400" />

Credits go to Stockinail that answered this question already on github: https://github.com/chartjs/Chart.js/issues/10815

Leave a comment