Bar chart param to rotate ticks automatically

[SebasQuirogaUCP]

Is your feature request related to a problem? Please describe. I am frustrated not being able to have an AxisProps param that automatically rotates the ticks when they overlap. I know there is a work around using renderTicks but still I would prefer an out-of-the-box param for it.

Describe the solution you'd like I would like a new param added to the AxisProps: rotateOnTickLength: number | null

Describe alternatives you've considered I would like a new param added to the AxisProps: rotateOnTickLength: number | null that would evaluate every tick length and rotating it/them if length being > to rotateOnTickLength

Additional Context

Desire

I would be very pleased helping with this 😎🤓

[ollwenjones]

How are you proposing we measure the tick length? I suggest you are assuming

1. A specific font size
2. There's enough margin around the chart to show the rotated labels.

You can aways implement what you are suggesting by measuring things outside the chart itself, and them adjusting the props you pass the chart accordingly. I had to do something similar for margins, because auto-margin was a requirement for me, but it involved math with estimates of character widths based on the font-size setting, because font size is configurable here, too.

I would be very pleased helping with this 😎🤓

Why not try it out and put up a PR? 😃

[SebasQuirogaUCP]

Thank you for your reply @ollwenjones. The user can still customize the font size using the renderTicks callback for either axes. The initial idea is to have a new param rotateOnTickLength in AxisProps interface that computes the length of each tick using its length and splitting it accordongly.

Why not try it out and put up a PR? 😃

Working on it 🤓

[SebasQuirogaUCP]

It turns out that the rotation overlaps with the axis depending on the length of the tick, this can be worked around but as a new tool to automatically truncate ticks from an axis this PR.

[ollwenjones]

@SebasQuirogaUCP It's also worth suggesting that for large data-sets, a bar graph is just the wrong tool. on a line graph, you can just have a given number of axis ticks, instead of one for each data-point. Beyond a certain density, a bar graph starts to look like an area graph, anyway, and readability of individual items gets lost.

Also, maybe you linked my PR on accident?

[SebasQuirogaUCP]

Dear @ollwenjones,

I apologize. I mistakenly added your PR, it is now updated.

Text truncation functionality is a valuable tool for data visualization engineers and enthusiasts, expanding the array of available options to customize charts. While other chart types can always be considered, I believe it's important for engineers and developers to have the flexibility to choose based on business requirements rather than technical limitations.

Let's recall some of the advantages of having text truncation on Axes

• Enhance aesthetics: Neatly truncated text can lead to more visually appealing charts, providing a professional and polished appearance.

• Maintain consistency: In cases where charts are dynamically generated based on data, text truncation helps maintain consistent chart dimensions across different datasets.

[ollwenjones]

@SebasQuirogaUCP you don't have to persuade me. I'm not a maintainer. 😄

Have you considered the axis > format prop? you can easily truncate text in ticks in the ValueFormatter function you provide, without having to have a separate prop just for truncation.

[SebasQuirogaUCP]

@ollwenjones Yay! 😄 I totally remember working on something similar before and it turns out that this is a very common use case when developing dynamic charting, So, wouldn't it be awesome if we had an out-of-the-box prop that could effortlessly handle this common use case? It would definitely save us some time and make charting even more enjoyable!

Let's keep our fingers crossed and hope that this idea gets some love from the community 🤞

[ollwenjones]

To be clear, this is a legend rendered by the pie chart, not another legend nearby? If so this seems like a reasonable feature request. Afraid I don't have time right now to dig into the code to see where that state is, and whether it's easy enough to share between the two parts. Probably is?

[ollwenjones]

imo the reason to hesitate here, is open source projects often die the death of a thousand props... why Kent C. Dodds describes the reasons for "inverson of control" https://kentcdodds.com/blog/inversion-of-control

If there is an easy prop for achieving truncation here (and there is) it reduces maintenance overhead of the library itself not to add another prop. Again, I'm not a maintainer, just thinking through

[ollwenjones]

The same could be said of the automatic rotation, actually. You measure the space your chart is in, set a threshold for number of ticks per number of pixels, and then change what rotation you pass to the chart. Control for that is already "inverted" so...

[ollwenjones]

If it were me making a roadmap, I'd say, auto-rotate, sure, but we need auto-margin, first. auto-rotate, auto-truncate, and auto-margin all together would be slick for unruly data-sets, esp. unruly names.

Implementing auto margin from the outside was one of the harder problems I had to solve in sticking w/ nivo... would be interesting to be able to roll some of that back in, if maintainers and I both had time 😬

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[manzaloros]

I would love to see a feature like this as well. It sounds like there are many variables to take into account, so its implementation would be non-trivial, but even a custom example from someone's code would be helpful.

By the way, I'm interested in this for Line charts.