Recharts配合<Brush/>组件时自定义X轴刻度渲染异常问题

问题核心表现 #

• 业务场景：展示单日时序数据，数据结构为[{ date: '9:30', value: 1 }, { date: '9:35', value: 2 }, ...]，要求X轴仅展示整点时刻刻度，隐藏9:45这类非整点刻度，因此手动传入每小时粒度的固定刻度数组['9:00', '10:00', ...]给XAxis组件。
• 异常现象：未使用Brush缩放时，X轴整点刻度显示完全正常；拖动Brush放大局部时间区间后，X轴仅剩余1个刻度，其余整点刻度全部消失。
• 对照排查：移除自定义ticks配置、使用Recharts默认刻度生成逻辑时，Brush缩放交互运行正常，但无法满足仅显示整点刻度的需求。
• 关联环境：React v17.0.2、Recharts v2.1.9、Chrome 103.0.5060.53

问题根因 #

Recharts的Brush组件触发缩放时，会自动计算当前可视区间的坐标域，默认逻辑下X轴刻度是基于这个可视域动态生成的。如果硬编码传入全量静态的自定义ticks数组，组件内部在做刻度和可视域的匹配时，会因为字符串类刻度值没有和数据索引建立稳定映射，出现范围判定偏差，大部分落在可视区间内的整点刻度会被误判为不在域内而被过滤，最终只残留1个可显示的刻度。

可行解决方案 #

方案1：通过interval + tickFormatter控制刻度（最稳定，推荐） #

不需要手动生成固定刻度数组，直接使用原始数据的date字段作为X轴数据源，根据数据粒度计算整点对应的数据点间隔传给interval属性，再通过tickFormatter过滤非整点刻度即可，完全兼容Brush的原生缩放逻辑：

// 示例数据为5分钟1条，1小时对应12个数据点，按实际数据粒度调整即可
const HOUR_POINT_INTERVAL = 12;
<XAxis
  dataKey="date"
  interval={HOUR_POINT_INTERVAL}
  tickFormatter={(value) => value.endsWith(':00') ? value : ''}
/>

该方案不需要维护额外状态，缩放过程中Recharts会自动适配当前可视区间调整刻度位置，同时保证只有整点刻度会被渲染，不会出现非整点的冗余刻度。

方案2：监听Brush变化动态过滤可视区刻度 #

如果业务要求必须手动传入ticks列表，可以监听Brush的onChange事件获取当前可视区间的起止索引，从全量整点刻度中筛选出落在可视区间内的有效值，动态更新传给XAxis的ticks属性：

import { useState } from 'react';
// 全量整点刻度、全量图表数据提前定义
const fullHourTicks = ['9:00', '10:00', '11:00' /* 其余整点值 */];
const fullChartData = [/* 全部时序数据 */];
export default function Chart() {
  const [visibleTicks, setVisibleTicks] = useState(fullHourTicks);
  const handleBrushChange = ({ startIndex, endIndex }: { startIndex: number; endIndex: number }) => {
    const visibleData = fullChartData.slice(startIndex, endIndex + 1);
    // 筛选出当前可视区间内存量的整点刻度
    const matchedTicks = fullHourTicks.filter(tick => visibleData.some(item => item.date === tick));
    setVisibleTicks(matchedTicks);
  };
  return (
    <AreaChart data={fullChartData}>
      {/* 其余图表组件 */}
      <XAxis dataKey="date" ticks={visibleTicks} />
      <Brush dataKey="date" onChange={handleBrushChange} />
    </AreaChart>
  )
}

方案3：升级版本+配置项修复（成本最低） #

Recharts在2.10及以上版本修复了自定义ticks和Brush联动的域计算偏差问题，升级版本后给XAxis组件添加allowDuplicatedCategory={false}配置，不需要修改原有自定义ticks的逻辑即可正常联动：

<XAxis
  dataKey="date"
  ticks={fullHourTicks}
  allowDuplicatedCategory={false}
/>

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