如何设置Recharts Y轴标签换行宽度，避免每个单词单独占行展示

问题说明 #

使用Recharts开发垂直柱状图时，Y轴标签出现不符合预期的换行现象：每个单词都单独占据一行。期望可以自定义指定Y轴标签的宽度，仅当标签内容超出该宽度阈值时才触发换行。
现有实现代码如下：

<BarChartWrapper>
    <BarChart
        layout="vertical"
        width={668}
        height={248}
        barCategoryGap={20}
        data={data}
        margin={{ top: 0, right: 50, bottom: 0, left: 50 }}
    >
        <CartesianGrid strokeDasharray="5" horizontal={false} stroke="#E7E7E7" />
        <XAxis
          label="(%)"
          // 也可传入自定义react组件作为标签 label={<CustomizedLabel />}
          tickLine={false}
          tickMargin={10}
          type="number"
          domain={[0, 90]}
        />
        {/* domain最大值可设置为最高同意率+10*/}
        <YAxis
          tick={{fontSize: 10, color: Colors.gray2}}
          tickLine={false}
          tickMargin={20}
          dataKey="name"
          type="category"
        />
        <Tooltip />
        <Bar dataKey="uv" barSize={24} fill="#009BAB" radius={[0, 4, 4, 0]} />
      </BarChart>
</BarChartWrapper>

异常效果截图：

解决步骤 #

方案1：指定Y轴固定宽度（简单快捷） #

Recharts默认会自动分配Y轴宽度，空间不足时会强制拆分单词换行。直接给<YAxis>添加width属性，指定你需要的宽度阈值即可：

<YAxis
  width={120} // 可根据需求自定义宽度数值，单位px
  tick={{fontSize: 10, color: Colors.gray2}}
  tickLine={false}
  tickMargin={20}
  dataKey="name"
  type="category"
/>

如果设置固定宽度后仍然出现强制拆分单词的问题，可以使用自定义Tick渲染的方案。

方案2：自定义Y轴Tick组件（灵活控制换行规则） #

通过自定义Tick组件，用foreignObject嵌入HTML元素，通过CSS控制换行逻辑，保证仅超出宽度时在单词边界换行，不会拆分单个单词：

1. 先定义自定义Tick组件：

const CustomYAxisTick = (props) => {
  const { x, y, payload, width = 120 } = props;
  return (
    <g transform={`translate(${x},${y})`}>
      <foreignObject width={width} height={40} x={-width} y={-20}>
        <div 
          style={{
            fontSize: '10px',
            color: Colors.gray2,
            wordBreak: 'keep-all', // 禁止拆分单词
            wordWrap: 'break-word',
            lineHeight: '1.2',
            textAlign: 'right'
          }}
        >
          {payload.value}
        </div>
      </foreignObject>
    </g>
  )
}

2. 将自定义组件传入YAxis的tick属性：

<YAxis
  width={120}
  tick={<CustomYAxisTick width={120} />}
  tickLine={false}
  tickMargin={20}
  dataKey="name"
  type="category"
/>

配置完成后，Y轴标签会固定为你设置的宽度，仅当文本总长度超出阈值时才会在单词之间换行，不会出现单个单词单独占一行的问题。

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