0
429
ViewsHow 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.
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!
·
Santiago Gelvez
1 answers
Answer question0
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}
>
·
Santiago Gelvez
Report
Answer question