如何在 Chart.js 条形图中添加左/右填充？

Posted 2023-03-06

【中文标题】如何在 Chart.js 条形图中添加左/右填充？

【英文标题】：How to add left/right padding in Chart.js bar chart?

【发布时间】：2020-10-01 04:41:44

【问题描述】：

我想在我的 Chart.js 条形图中添加左右填充。我不明白为什么只显示第一个和最后一个条的一半：

我尝试玩layout > padding，但没有成功：

layout: 
  padding: 
    left: 20
  

代码可在此处获得：JSFiddle。

感谢您的帮助。

【问题讨论】：

您可以为其容器提供填充<div class="col" style="padding:100px"> <canvas id="chart1"></canvas> </div>

实际上我真正想要的是图表上的条形宽度相同。这意味着没有 2017 年和 2019 年的柱线粘在图表的边界上。这就是为什么我问如何在条上添加填充。

【参考方案1】：

你可以添加。它将显示第一个和最后一个条的宽度相同。

xAxes: [
  offset: true,
]