[Chartjs]-ChartJS: Fixed width for data-part, the rest for labels

Cheeky solution – you can add a dummy chart before your charts having the same labels.
Let’s call this dummy chart as chart D and your main chart as chart M.
In M, you would fix it’s width and hide the labels by writing in options –

scales: {y: {ticks: {display: false}}}

Now you have a fixed data width.
In D, you would just display the labels and hide the data part (hiding grid lines, legend, title, etc.).
So now you have two charts side-by-side, one is displaying just the labels and the other displaying the bars, just need to position it in such a way that no matter how long the label is, it does not overlap with M.

Repeat the step similarly for all charts and have the same width for M1,M2,M3,…
This is a solution that seemed to work for me.

One option is to set a large fixed width for the y axis scale on all the charts.

o.options.scales.y.afterFit = function(axis) {axis.width = 150;};

This is done by attaching a callback to the afterFit event of the y axis and just overriding the calculated width with a big fixed number.

Before:

After: