使用 chart.js，当只有几个条显示时，如何对齐条而不是将它们居中？

Question

As some background: I have a horizontal bar chart with a dynamic number of bars. I have set min and max bar widths for each of the datasets.

---

By default, chart.js aligns the bars in the center of chart. Instead I would like to align the bars to the left (or in the top as I am using a horizontal bar chart).

Thinking of the bars as HTML elements, this would be the equivalent of applying the css: float:left to each bar. Is there anyway to do this in chart.js? I still want the axes to extend to the end of the container, it just looks funny to have only a couple bars with a ton of space in between them (I also don't want really fat bars).

Thanks for any help!

---

Note: This is a duplicate of 56361398

---

EDIT : See codepen for example (one bar is centered in the chart, I would like it aligned to the left, next to the y axis).

Answer 1

I have checked the settings and there is no setting to left-align the bar charts. I doubt it is easy to implement since Chart.JS is a canvas under the hood.

Also, technically speaking the chart is in fact "left-aligned" however it is just one slim bar. The bar could very well use the whole bar space in red:

The best workaround is to create empty labels that will later be populated if needed. If you need to add more bars just check if a label name is "" (empty) and then overwrite it. Otherwise push the new label.

Example: https://codepen.io/adelriosantiago/pen/vYLYXPx?editors=0110