Chartjs-Chart.js does not display stacked data with linear axis and fixed steps

by

0👍

✅

Probably you want to have tick labels correctly placed underneath the bars, hence you need to define gridLines.offsetGridLines: false. In that case you could simply define an empty string for the tick labels you don’t want to see.

Please have a look at your amended code below.

var labels = [];
var workingHoursRegularPart = [];
var workingHoursOvertimeHours = [];
for (var i = 0; i < 30; i++) {
  if (i == 0 || i == 29 || (i + 1) % 7 == 0) {
    labels.push(i + 1);
  } else {
    labels.push('');
  }
  workingHoursRegularPart.push(8);
  workingHoursOvertimeHours.push(1);
};

new Chart('dailyWorkingHoursChart', {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
        label: 'Regular working hours',
        data: workingHoursRegularPart,
        backgroundColor: 'rgba(30,60,160,0.5)',
        borderColor: 'rgba(30,60,160)',
        borderWidth: 1
      },
      {
        label: 'Overtime',
        data: workingHoursOvertimeHours,
        backgroundColor: 'rgba(60,30,160,0.25)',
        borderColor: 'rgba(60,30,160)',
        borderWidth: 1
      }
    ]
  },
  options: {
    animation: false,
    legend: {
      display: false
    },
    responsive: true,
    scales: {
      xAxes: [{        
        stacked: true,
        gridLines: {
          offsetGridLines: false
        }
      }],
      yAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true,
          min: 0,
          max: 16,
          stepSize: 2
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="dailyWorkingHoursChart" height="80"></canvas>

0👍

To solve this problem, you could add a second xAxes and making the first one hidden (display: false).

xAxes: [{     
    display: false,
    stacked: true
  },
  {        
    type: 'linear',
    ticks: {
      min: 1,
      max: 31,
      stepSize: 7
    }
  }],

Please have a look at your amended code below.

var labels = [];
var workingHoursRegularPart = [];
var workingHoursOvertimeHours = [];
for (var i = 0; i < 30; i++) {
  labels.push(i + 1);
  workingHoursRegularPart.push(8);
  workingHoursOvertimeHours.push(1);
};

new Chart('dailyWorkingHoursChart', {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
        label: 'Regular working hours',
        data: workingHoursRegularPart,
        backgroundColor: 'rgba(30,60,160,0.5)',
        borderColor: 'rgba(30,60,160)',
        borderWidth: 1
      },
      {
        label: 'Overtime',
        data: workingHoursOvertimeHours,
        backgroundColor: 'rgba(60,30,160,0.25)',
        borderColor: 'rgba(60,30,160)',
        borderWidth: 1
      }
    ]
  },
  options: {
    animation: false,
    legend: {
      display: false
    },
    responsive: true,
    scales: {
      xAxes: [{     
        display: false,
        stacked: true
      },
      {        
        type: 'linear',
        ticks: {
          min: 1,
          max: 31,
          stepSize: 7
        }
      }],
      yAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true,
          min: 0,
          max: 16,
          stepSize: 2
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="dailyWorkingHoursChart" height="80"></canvas>

Leave a comment