Recharts如何增大坐标轴空间 容纳多个X轴标签避免内容截断

在X轴原有标签下方新增标签时，新增标签始终被裁剪截断，问题效果如下：

当前XAxis组件实现代码：

<XAxis type="number" tick={<CustomizedNumberTick lang={props.language} />}>
  <Label
    style={{ fontSize: 12 }}
    value={chartTitle}
    position="insideTop"
    offset={-500}
  />
  <Label
    style={{ fontSize: 12 }}
    value={props.formatMessage({ id: "kilograms" })}
    position="insideBottom"
    offset={-5}
   />
   <Label
     style={{ fontSize: 12 }}
     value={props.formatMessage({ id: "myFooter" })}
     position="insideBottom"
     offset={-15}
   />
</XAxis>

已尝试为XAxis设置不同取值的dy属性，未达到预期效果，需要实现kilograms与myFooter两个标签完整展示。

标签被裁剪的核心原因是Recharts默认给图表预留的底部边距不足，超出绘图区域的内容会被默认裁切，按以下步骤调整即可：

• 第一步：给最外层图表容器组件（LineChart/BarChart/ComposedChart等，根据实际使用的图表类型选择）设置足够的底部边距，为双行标签预留展示空间，双行标签建议将bottom值设为50-70：

// 以LineChart为例，其他类型图表的margin配置逻辑完全一致
<LineChart
  margin={{
    top: 20,
    right: 30,
    left: 20,
    bottom: 60
  }}
>
{/* 其余图表配置不变 */}
</LineChart>

• 第二步：调整两个底部Label的offset取值，insideBottom位置下负数偏移会让标签向绘图区外延伸，更容易触发裁剪，将两个标签的偏移值设为正数、拉开间距即可：

<XAxis type="number" tick={<CustomizedNumberTick lang={props.language} />}>
  <Label
    style={{ fontSize: 12 }}
    value={chartTitle}
    position="insideTop"
    offset={-500}
  />
  {/* 靠近X轴的第一行底部标签 */}
  <Label
    style={{ fontSize: 12 }}
    value={props.formatMessage({ id: "kilograms" })}
    position="insideBottom"
    offset={8}
  />
  {/* 靠下的第二行底部标签 */}
  <Label
    style={{ fontSize: 12 }}
    value={props.formatMessage({ id: "myFooter" })}
    position="insideBottom"
    offset={28}
  />
</XAxis>

• 第三步：如果调整后仍有微小的位置偏差，不需要给XAxis本身设置dy，直接给需要微调的Label组件加dy属性即可，数值越大标签位置越靠下，按需调整到完全展示即可。

注意：不建议将底部标签的position设为bottom，该位置属于绘图区外部，offset计算逻辑和insideBottom不同，更容易出现位置错乱、对齐异常的问题。

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