Chartjs-Multiple bar widths in Chart.js bar chart

This actually is possible to do in chart.js, but the solution is a bit “hackish”. The gist of it is that you can create a 2nd x axis scale and set the barThickness property to a value smaller than your other axis. Then you assign your dataset to this access and finally, set the scale display to false.

You end up with some datasets on 1 axis and another dataset on a different hidden axis. Everything else still works (no breaking effects like you mentioned in your question).

Here is what your options would look like.

var options = {
  scales: {
    xAxes: [{
      categoryPercentage: 0.6,
      barPercentage: 1,
    }, {
      id: 'x-axis-2',
      type: 'category',
      display: false,
      categoryPercentage: 0.6,
      barPercentage: 1,
      barThickness: 20,
      gridLines: {
        offsetGridLines: true
      }
    }],
  },
  legend: {
    display: false
  }
};

You have to make sure you add xAxisID: 'x-axis-2' to whichever dataset you want to bind to the new axis.

Here is a codepen example demonstrating all of this.

You can even do this for a horizontal bar chart by changing the scales around. See this codepen example showing this.