如何在Recharts图表中自定义X轴多行刻度

Recharts的XAxis组件支持通过tick属性自定义刻度的渲染内容，完全可以实现多行文本的效果，不用局限于单一的dataKey值。具体实现方式如下：

核心思路 #

利用XAxis的tick属性传入自定义渲染函数，在函数中根据数据项返回包含多行内容的JSX元素，同时通过SVG的<g>和<text>标签控制文本的排版与位置。

示例代码1：基于多字段数据生成多行刻度 #

如果你的数据源中每个X轴项包含多个字段（比如主名称和副标题），可以直接在tick函数中渲染这些字段：

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

const chartData = [
  { month: 'Jan', quarter: 'Q1', value: 420 },
  { month: 'Feb', quarter: 'Q1', value: 330 },
  { month: 'Mar', quarter: 'Q1', value: 210 },
  { month: 'Apr', quarter: 'Q2', value: 290 },
];

export default function MultiLineXAxis() {
  return (
    <BarChart width={700} height={350} data={chartData}>
      <CartesianGrid strokeDasharray="3 3" />
      {/* 自定义X轴刻度 */}
      <XAxis 
        dataKey="month"
        tick={({ x, y, payload }) => (
          <g transform={`translate(${x}, ${y})`}>
            <text textAnchor="middle" dy={0}>{payload.month}</text>
            <text textAnchor="middle" dy={16} fontSize={12} fill="#666">
              {payload.quarter}
            </text>
          </g>
        )}
      />
      <YAxis />
      <Tooltip />
      <Bar dataKey="value" fill="#8884d8" />
    </BarChart>
  );
}

示例代码2：拆分单个字符串为多行刻度 #

如果你的数据是包含换行符的单个字符串（比如"Jan\nQ1"），可以通过拆分字符串来生成多行文本：

<XAxis 
  dataKey="label"
  tick={({ x, y, payload }) => {
    const lines = payload.label.split('\n');
    return (
      <g transform={`translate(${x}, ${y})`}>
        {lines.map((line, idx) => (
          <text 
            key={idx} 
            textAnchor="middle" 
            dy={idx * 16} 
            fontSize={idx === 0 ? 14 : 12}
          >
            {line}
          </text>
        ))}
      </g>
    );
  }}
/>

样式优化提示 #

• 通过dy属性控制每行文本的垂直间距，数值越大行间距越宽。
• 可以给副标题设置更小的字号、灰色字体，区分主次内容。
• 如果不需要刻度线，可添加tickLine={false}属性隐藏，避免和多行文本重叠。

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