Search code examples
javascriptreactjstypescriptrecharts

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

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

enter image description here

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!

Solution

  • 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}
>