如何增加圖表中的軸空間以適應另一個標簽？

Question

我正在嘗試在我的 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 屬性設置為不同的值，但沒有運氣。 理想情況下，我希望 kolograms 標簽和 myFooter 標簽都適合。

任何幫助表示贊賞！

Answer 1

我可以通過將條形圖中的 margin-bottom 從 10 增加到 20 來解決這個問題：

<BarChart
 width={600}
 height={550}
 layout="vertical"
 data={props.data}
 margin={{ top: 5, right: 30, left: 55, bottom: 20 }}
 ref={ref}
>