Recharts: Possible to move ticks text?

[emiloberg]

Hi,

I can't really find a way to move the ticks up/down.

Looking at the renderTicks() function it looks like the dy value is set to fixed values depending on if the orientation is left/right/top/default and it doesn't look like it's possible to override it from axisProps or customTickProps as dy is not a valid presentation attribute.

My use case is that I want to be able to make the tick text larger, e.g. tick={{ fontSize: 20 }} but with them still being below the X axis.

[xile611]

Now you can set tick to be a function or a react element to achieve your goal temporarily. In the feture, I think we should let shape attributes, just like cx, cy, dx, dy, can override defult settings.

[pavlomatchak]

Hi,
Is it possible to rotate ticks? When i'm applying css to - tick rotates, but changes its position http://take.ms/X7zVC

[jm90m]

@emiloberg After some fiddling around with this, you can move ticks around by setting the dx or dy value respectively so in my case, I wanted to move the ticks down on the X-Axis so I just did this tick={{ fontSize: 20, dy: 20 }} you can do the same with moving the y-axis ticks towards more the left hand side by doing tick={{dx: -20}}