Rotate <XAxis /> tick lables

Question

Rotate <XAxis /> tick lables

BrittMcDanel opened this issue 6 years ago · comments

Britt McDanel commented 6 years ago

Hi, this is a pretty simple issue but I can't seem to figure out how to rotate x axis tick labels.

What I am trying to do is essentially add

.attr("transform", "rotate(-90)")

to the text element of the x axis label.

I see there is tickLabelComponent prop of <XAxis /> but I cannot seem to get it to work.

Thanks

Chris Williams · Answer 1 · Tue Jun 26 2018 15:33:31 GMT+0800 (China Standard Time)

Hey @VincentRichard555, thanks for checking out data-ui. In theory this should work by setting the tickLabelProps to something like (d, i) => ({ transform: 'rotate(45)' }), but it doesn't work because of the way transforms are done in the version of @vx/axis I'm using.

I'm planning to bump all @vx packages this week and after that this will be possible by setting tickLabelProps={(d, i) => ({ angle: 45 })}. angle (and anything else returned in this object) is used as a prop passed to a @vx/text <Text /> component, which is the default tick label component in @vx/axis. I'll also plan to expose the tickComponent prop when I make this change and tag you in the PR 👍

Britt McDanel · Answer 2 · Wed Jun 27 2018 04:20:43 GMT+0800 (China Standard Time)

Thanks that sounds great!

Chris Williams · Answer 3 · Fri Jun 29 2018 10:29:00 GMT+0800 (China Standard Time)

@VincentRichard555 this should now be fixed/exposed in @data-ui/xy-chart v0.0.59.

I also added a storybook demo so you can play with the various props 🚀 and here's an example codesandbox.

Britt McDanel · Answer 4 · Sun Jul 01 2018 05:28:31 GMT+0800 (China Standard Time)

Thanks! This solves my problem. I appreciate your fast response to my issue.

QuickGlitch · Answer 5 · Tue Sep 18 2018 23:07:14 GMT+0800 (China Standard Time)

@williaster, have these changes for Xaxis and Yaxis tick labels been implemented for the Histogram package?

Chris Williams · Answer 6 · Wed Sep 19 2018 00:34:10 GMT+0800 (China Standard Time)

hey @AdeBode this has not been ported to @data-ui/histogram yet, it shouldn't be too difficult, though.

I opened #135 to track that feature. I'm pretty swamped at the moment so would totally welcome PRs, or I can probably find some time in the next ~4 weeks to get it done.

QuickGlitch · Answer 7 · Wed Sep 19 2018 19:51:13 GMT+0800 (China Standard Time)

@williaster Thanks for the quick response! Also swamped at the moment so I wont be able to make a PR (maybe in the future!). Anyhow, I just want to say thanks for the collection, I am really enjoying it!

caglarbayatli · Answer 8 · Tue Jan 28 2020 17:55:05 GMT+0800 (China Standard Time)

@williaster I think Xaxis label angle still does not work properly and its "tickLabelComponent" prop is not using?
Thanks