Recharts X轴scale为point时Bar尺寸无法自动计算的解决方案问询

方案1：使用Recharts自带自动适配属性（推荐） #

你不需要手动指定barSize，直接通过barCategoryGap属性控制柱子分类之间的间隙，Recharts会自动根据数据条数和容器宽度计算柱子宽度：

• 把你当前Bar组件上的barSize={40}删除
• 在ComposedChart组件上添加barCategoryGap属性，值可以是百分比或者固定像素值，示例如下：

<ComposedChart
  data={responseAverage}
  barCategoryGap="25%" // 调整这个值控制柱子间隙，值越大柱子越窄
>
  {/* 其余代码保持不变 */}
  <Bar dataKey="count" fill="#AAE5F9" />
  {/* 其余代码保持不变 */}
</ComposedChart>

如果需要控制单组内多个柱子的间隙，可以额外加barGap属性，比如barGap={8}。

方案2：手动动态计算barSize #

如果需要更精准的控制柱子宽度，可以基于数据长度动态计算：

固定宽度容器场景（你当前使用的width={700}） #

你可以在组件内提前计算barSize，预留左右边距和间隙，同时设置极值避免异常情况，修改后的完整代码如下：

const Chart = ({ responseAverage }) => {
  // 拷贝后排序避免修改原数组
  const sortedData = [...responseAverage].sort((a, b) => a.label - b.label);
  const dataCount = sortedData.length;
  // 基础配置：容器宽度700，左右共预留100px边距，柱子间隙16px，限制最小宽20px、最大宽60px
  const availableWidth = 700 - 100;
  const barSize = Math.max(20, Math.min(60, (availableWidth / dataCount) - 16));

  return (
    <ResponsiveContainer width={700} height={400}>
      <ComposedChart
        data={sortedData}
      >
        <CartesianGrid horizontal={false} strokeDasharray="4 4" />
        <XAxis scale="point" dataKey="label" />
        <YAxis label={{ value: 'No.Of Employees', angle: -90, position: 'insideLeft' }} tick={false} height={20} />
        {/* <Tooltip cursor={false} content={<CustomTooltip teamData={teamData} />} /> */}
        <Bar dataKey="count" barSize={barSize} fill="#AAE5F9" />
        <Line connectNulls={true} strokeWidth={3} dot={false} type="monotone" dataKey="count" stroke="#3080ED" />
        {/* <LabelList dataKey="name" position="insideTop" /> */}
      </ComposedChart>
    </ResponsiveContainer>
  );
};

自适应宽度容器场景 #

如果你的ResponsiveContainer宽度设为100%自适应父容器，可以通过ResizeObserver监听容器宽度变化，动态计算barSize即可。

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