Recharts垂直堆叠条形图小值条形被遮挡问题及最小宽度设置

问题：使用Recharts绘制垂直堆叠条形图时，数值大的条形占据了大部分空间，导致数值小的条形被重叠遮挡，需要解决该问题，或为每个条形设置最小宽度，确保数值为1的条形也能清晰显示。

用户当前代码 #

<ResponsiveContainer height={50} width="100%">
  <BarChart
    layout="vertical"
    data={[bar]}
    margin={{left: 30, right: 50}}
    stackOffset="expand"
  >
    <XAxis hide type="number"/>
    <YAxis
      type="category"
      dataKey="name"
      fontSize="20"
      hide
    />
    <Tooltip wrapperStyle={{zIndex: 1}} cursor={{fill: 'transparent'}}/>
    {bar['Not Triggered'] && <Bar dataKey="Not Triggered" fill="#FF6D6F" stackId="a" isAnimationActive={false}>
      <LabelList
        dataKey='Not Triggered'
        position="center"
        content={renderBarCustomizedLabel}
      />
    </Bar>}
    {bar['Not Started'] && <Bar dataKey="Not Started" fill="#F9AB4B" stackId="a" isAnimationActive={false}>
      <LabelList
        dataKey="Not Started"
        position="center"
        content={renderBarCustomizedLabel}
      />
    </Bar>}
    {bar['Ongoing'] && <Bar dataKey="Ongoing" fill="#57B0E2" stackId="a" isAnimationActive={false}>
      <LabelList
        dataKey="Ongoing"
        position="center"
        content={renderBarCustomizedLabel}
      />
    </Bar>}
    {bar['completed'] && <Bar dataKey="Completed" fill="#4EA167" stackId="a" isAnimationActive={false}>
      <LabelList
        dataKey="Completed"
        position="center"
        content={renderBarCustomizedLabel}
      />
    </Bar>}
  </BarChart>
</ResponsiveContainer>

可行解决方案 #

1. 为Bar组件设置minWidth属性 #

Recharts的Bar组件原生支持minWidth参数，直接指定每个条形的最小宽度即可确保小数值条形不会被压缩至不可见。建议根据容器尺寸调整合适的数值（比如10px）：

{bar['Not Triggered'] && <Bar 
  dataKey="Not Triggered" 
  fill="#FF6D6F" 
  stackId="a" 
  isAnimationActive={false}
  minWidth={10} // 添加最小宽度设置
>
  <LabelList
    dataKey='Not Triggered'
    position="center"
    content={renderBarCustomizedLabel}
  />
</Bar>}
// 其余所有Bar组件均添加minWidth属性，值保持一致

注意：如果保留stackOffset="expand"（按比例占满容器），设置minWidth可能导致总宽度超出容器，此时可以适当调小minWidth值，或结合下方方案修改堆叠逻辑。

2. 移除stackOffset="expand"，按实际数值展示 #

stackOffset="expand"会强制所有条形按比例拉伸至容器宽度，小数值的占比极低时自然会被压缩。如果不需要严格占满容器，直接移除该属性，让条形按实际数值宽度展示，同时配合minWidth确保小数值条形可见：

<BarChart
  layout="vertical"
  data={[bar]}
  margin={{left: 30, right: 50}}
  // 移除stackOffset="expand"
>
  {/* 其余组件不变，Bar组件添加minWidth */}
</BarChart>

这种方式下，条形总宽度由数值总和决定，小数值的条形会保持设置的最小宽度，不会被遮挡。

3. 预处理数据，给小数值设置最小占比阈值 #

如果必须保留stackOffset="expand"的占满效果，可以在传入图表前处理数据，给小数值设置一个最小占比，确保其在堆叠中有可见的宽度：

// 数据处理函数
const processBarData = (originalData) => {
  const total = Object.values(originalData).reduce((sum, val) => sum + val, 0);
  // 设置最小占比为5%，可根据需求调整
  const minRatio = 0.05;
  const minValue = total * minRatio;
  
  return Object.fromEntries(
    Object.entries(originalData).map(([key, val]) => [key, val < minValue ? minValue : val])
  );
};

// 使用处理后的数据
const processedBar = processBarData(bar);

// 图表中传入处理后的数据
<BarChart data={[processedBar]}>
  {/* 其余组件不变 */}
</BarChart>

注意：这种方式会改变数据的实际比例，适合仅需展示趋势、对精确比例要求不高的场景。

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