0
434
VistasHow 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 Respuestas
Responde la pregunta0
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
Denunciar
Responde la pregunta