Chartjs-Angular Chartjs Overlapping Bar Chart with Chartjs ver 2.7

by

2👍

✅

Your second x-axis will need to have the offset set to true:

{
  display: false,
  stacked: true,
  id: "bar-x-axis2",
  barThickness: 70,
  // these are needed because the bar controller defaults set only the first x axis properties
  type: 'category',
  offset: true, // <-- This property needs added
  categoryPercentage: 0.8,
  barPercentage: 0.9,
  gridLines: {
    offsetGridLines: true
  }
}

The chart.js cartesian axes docs state that this defaults to true, but that is apparently only for the first axis.

If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to true for a category scale in a bar chart by default.

Leave a comment