Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to increase the space between label text and axis?

See original GitHub issue

Do you want to request a feature or report a bug?

What is the current behavior?

I could not able to change the space between label text and axis

Is there an API to change this? Below is my current solution, with changed width of the axis and some CSS styles

.yAxis .recharts-layer.recharts-cartesian-axis-tick text{
  transform: translate(-5px, 0);
}
.xAxis .recharts-layer.recharts-cartesian-axis-tick text {
  transform: translate(0, 10px);
}

Issue Analytics

State:
Created 6 years ago
Reactions:3
Comments:5

Top GitHub Comments

9reactions

Graham42commented, Sep 1, 2017

I think this might work for you

<YAxis dy={-5} ... />

8reactions

ThePianoDentistcommented, Oct 10, 2017

@Graham42 's solution worked for me for the y-axis (but using dx rather than dy, so it moved the labels sideways)

for the x-axis (moving the labels down a bit). it worked in a simple fiddle. but in my actual use case the dy property gets applied but has no effect. I wonder if there’s a weird interaction between it and responsive container, or something else Im using