How to increase axis space in recharts to fit another label?-CodePudding

I'm trying to add another label below my X-Axis label, but it keeps getting cut off.

Here is my code for my 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>

I tried setting the dy property on the XAxis to different values, but no luck. Ideally, I'd like both the kolograms label and the myFooter label to fit.

Any help is appreciated!

CodePudding user response：

what do you mean it keeps cutting?

CodePudding user response：

I was able to figure it out by increasing the margin-bottom in my bar chart from 10 to 20:

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