React项目中Chart.js柱状图如何缩小柱子间距？

你遇到的问题根源有两个：

1. barThickness固定宽度覆盖了百分比参数：你设置了barThickness: 16，这会强制柱子保持固定宽度，导致barPercentage和categoryPercentage失去作用——这两个参数只有在柱子宽度由布局自动计算时才生效。
2. 数据与标签长度不匹配：data数组有6个值，但labels只有5个分类，多余的数据会生成无标签的柱子，干扰整体布局。

解决方案 #

方案1：移除固定宽度，让百分比参数生效

删掉barThickness配置，通过调整barPercentage和categoryPercentage来缩小间距：

• barPercentage：控制单根柱子占所在分类宽度的比例，值越大柱子越宽，分类内的柱子间距越小
• categoryPercentage：控制分类组占整个X轴宽度的比例，值越大分类之间的间距越小

修改后的代码：

const data = {
    labels: ["Apple", "Orange", "Grapes", "Banana", "Kiwi"],
    datasets: [{
      data: [20, 50, 30, 35, 30], // 修正数据长度与标签一致
      barPercentage: 0.9,
      categoryPercentage: 0.9,
      backgroundColor: ['#B2DED4', '#81CAB8', '#81CAB8', '#4FB59D', '#2BA489'],
      borderColor: '#707070',
      borderWidth: 1,
      borderRadius: 10,
    }],
  }

const options = {
    scales: {
      y: {
        title: {
          display: true,
        },
        grid: {
          display: true,
        },
      },
      x: {
        title: {
          display: true,
        },
        grid: {
          display: false,
        }
      }
    },
    plugins: {
      legend: {
        display: false,
      },
      datalabels: {
        display: false
      }
    },
  }

<Bar data={data} options={options} />

方案2：保留宽度控制，改用maxBarThickness

如果需要限制柱子最大宽度，同时让布局自动缩小间距，可以用maxBarThickness替代barThickness，它会让柱子在不超过最大宽度的前提下，尽可能填满分类空间：

datasets: [{
  // ...其他配置
  maxBarThickness: 16, // 替换barThickness
  barPercentage: 1.0,
  categoryPercentage: 1.0,
}]

内容的提问来源于stack exchange，提问作者RuLee