Recharts 中如何让 X 轴的刻度文字自动换行显示？

___树潼提问于 2026-03-13 19:08:23 阅读 4

交互

我在用 Recharts 画一个柱状图，X 轴的分类名称太长了，直接显示会重叠在一起，看起来特别乱。我试过在 tick 里加样式设置 wordBreak 或者 whiteSpace，但好像都不起作用。有没有办法让 X 轴的文字自动换行或者倾斜显示？

下面是我的代码片段：

const data = [
  { name: '用户行为分析报告', value: 400 },
  { name: '系统性能监控数据', value: 300 }
];

<BarChart width={600} height={300} data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <Bar dataKey="value" fill="#8884d8" />
</BarChart>

Recharts 图表可视化

我来解答赞 0 收藏

反馈

1 条解答

慕容贝贝 Lv1

这个问题很常见，XAxis 的 tick 默认不支持自动换行，需要自定义 tick 组件。

最直接的办法是写一个自定义的 tick 渲染函数：

const CustomXAxisTick = (props) => {

  const { x, y, payload } = props;

  const text = payload.value;

  

  // 按8个字符一刀，自己调这个数值  const maxChars = 8;

  const words = text.split('');

  const lines = [];

  

  for (let i = 0; i < words.length; i += maxChars) {

    lines.push(words.slice(i, i + maxChars).join(''));

  }

  

  return (

    <g transform={translate(${x},${y})}>

      {lines.map((line, index) => (

        <text

          x={0}

          y={index * 16}

          textAnchor="middle"

          fill="#666"

          fontSize={12}

        >

          {line}

        </text>

      ))}

    </g>

  );

};



// 用在图表里

<BarChart width={600} height={300} data={data}>

  <XAxis dataKey="name" tick={<CustomXAxisTick />} />

  <YAxis />

  <Bar dataKey="value" fill="#8884d8" />

</BarChart>

如果你不想自己算字符换行，另一个简单的办法是让文字倾斜显示：

<XAxis 

  dataKey="name" 

  tick={{ transform: 'rotate(-30deg)' }} 

  tickMargin={10}

/>

倾斜适合文字不是很长的情况，换行适合特别长的分类名，看你具体需求选一个。

2026-03-13 19:11