CODEWITHSUNDEEP
javascriptreactjstypescriptrecharts
avenmia
avenmia

Reputation: 2605

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!

Upvotes: 1

Views: 4505

Answers (2)

Sergey P. aka azure
Sergey P. aka azure

Reputation: 4742

Consider using padding option of the XAxis

Upvotes: 1

avenmia
avenmia

Reputation: 2605

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

Upvotes: 2

Related Questions