Recharts图表X轴自定义刻度不显示问题排查

可能的原因及修复方案 #

1. 自定义tick元素缺失基础样式 #

Recharts的自定义tick默认无尺寸、定位样式，会导致元素存在但不可见。给返回的<div>添加内联样式：

tick={() => <div style={{ width: 'auto', padding: '0 4px', whiteSpace: 'nowrap', color: '#333' }}>hi</div>}

如果只是文本刻度，也可以直接返回字符串，避免不必要的嵌套：

tick={() => 'hi'}

2. 调整刻度的垂直偏移 #

刻度可能因默认偏移设置被挤出可视区域，通过dy属性调整与轴线的垂直距离：

<XAxis 
  tick={() => <div>hi</div>} 
  dy={10} // 增加偏移量，确保刻度显示在可视范围内
/>

3. 确认tick函数的参数处理 #

如果需要基于刻度值动态生成内容，确保正确接收参数，避免渲染异常：

tick={(value, index) => <div>{`自定义：${value}`}</div>}

4. 检查父容器的溢出设置 #

若折线图父容器设置了overflow: hidden，可能裁剪掉超出的刻度。调整父容器样式或给图表预留底部空间：

<ResponsiveContainer width="100%" height={300} style={{ marginBottom: 25 }}>
  {/* 折线图内容 */}
</ResponsiveContainer>

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