Rechart.js 坐标轴文本间距、起点偏移、hover垂直线自定义问题

1. 减小X轴底部月份文本间距 #

直接调整XAxis组件的相关属性即可，Recharts 默认会自动计算刻度间隔，手动指定参数即可压缩间距：

<XAxis
  dataKey="month"
  // 强制展示所有刻度，不自动隐藏部分月份
  interval={0}
  // 调整刻度文字的内边距和字号
  tick={{ padding: 0, fontSize: 12 }}
  // 调整X轴自身的左右边距
  margin={{ left: 0, right: 0 }}
/>

如果需要进一步压缩，可自定义tick渲染函数，单独控制每个文本的宽度。

2. 折线起始点偏移指定像素（不压缩折线） #

通过图表容器的margin属性配合X轴的padding属性实现，不会影响折线本身的比例：

<LineChart
  data={chartData}
  // 给图表左侧预留20px的偏移空间
  margin={{ left: 20 }}
>
  <XAxis
    dataKey="month"
    // X轴内容区不额外加内边距，避免折线被压缩
    padding={{ left: 0, right: 0 }}
  />
  {/* 其余折线、Y轴等组件保持原有配置 */}
</LineChart>

3. 自定义hover时的垂直参考线 #

该参考线由Tooltip组件的cursor属性控制，可直接传入样式配置完全自定义外观：

<Tooltip
  cursor={{
    stroke: '#1890ff', // 自定义线的颜色
    strokeWidth: 1, // 线的宽度
    strokeDasharray: '3 3', // 虚线样式，需要实线可删除该属性
    height: '90%', // 自定义线的高度
    strokeOpacity: 0.7 // 透明度
  }}
/>

如果需要更复杂的样式，可直接将自定义React组件赋值给cursor属性，完全自主控制渲染逻辑。

内容的提问来源于stack exchange，提问作者Артем WEB