ChartJS横向柱状图数据量小时间距过大问题求助

针对你使用ChartJS 3.9.1 + react-chartjs-2 4.3.1遇到的问题，核心解决方案是固定柱子厚度与间距，通过调整数据集配置即可实现：

修改数据集配置 #

启用barThickness固定柱子厚度，添加barGap控制柱子间的固定间距，同时调整categoryPercentage和barPercentage确保布局紧凑：

barChartData = {
  labels: labels,
  datasets: [
    {
      data: values,
      backgroundColor: '#F5CB3E',
      barThickness: 17, // 固定柱子厚度（横向柱状图中对应垂直方向的柱子高度）
      barGap: 10, // 柱子之间的固定间距（单位：像素，可按需调整）
      borderRadius: 5,
      categoryPercentage: 1.0, // 让每个分类占满分配的空间
      barPercentage: 1.0, // 让柱子占满分类空间（配合barThickness固定尺寸）
      minBarLength: 1,
      yAxisID: 'y',
    },
  ],
};

为什么之前的设置无效？ #

你之前仅调整barPercentage和categoryPercentage但未固定barThickness时，ChartJS会根据图表容器高度自动分配每个分类的高度。当数据量少时，每个分类的可用高度被放大，柱子按比例缩放后，间距会被同步拉伸。固定barThickness后，柱子尺寸不再随分类高度变化，配合barGap就能保持固定间距。

额外优化（可选） #

如果图表容器高度固定，数据量过少时底部会出现空白，可通过y轴的padding配置调整上下内边距，让布局更平衡：

scales: {
  // ... 其他原有配置
  y: {
    padding: {
      top: 10,
      bottom: 10,
    },
    ticks: {
      beginAtZero: false,
      color: '#f0f0f0',
      font: {
        size: 14,
        weight: 500,
      },
    },
    grid: {
      drawBorder: false,
      display: false,
    },
  },
}

这样无论数据集包含2-3个值还是大量数据，柱子的厚度和间距都会保持一致。

内容的提问来源于stack exchange，提问作者artyom.poteshkin98