Autorotate x axis tick texts on types "category" and "timeseries"

Description

I would like to have an option for autorotating x axis tick texts on type “category” if there isn’t enough space to fit them between 2 ticks. Main reason for autorotating x axis tick texts is saving unused space in the chart.

It should autorotate if:

1. axis_x_tick_multiline === false
2. axis_x_tick_autorotate === true
3. axis_x_tick_rotate !== 0
4. longest text width > space between 2 ticks
5. Check 1-4 on resize/redraw

It also improves the appereance of the x axis if:

• the texts are too long and there is less space between 2 ticks or
• there are many elements on x axis

Examples:

1. There is enough space so the texts aren’t rotated:

2. There is not enough space so the texts are rotated:

3. There is not enough space for 1 text so all texts are rotated:

4. There are many elements on x axis:

Would this feature be useful enough to implement it in billboard or perhaps as a plugin? If needed, this feature could be expanded and implemented for other axis types in the future.

What do you think about it?

[netil]

🎉 This issue has been resolved in version 1.12.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[michkami]

I worked on this issue in the last few days. As the code changes are not minimal and autorotating could be used frequently, I implemented it in the core.

1. X axis tick texts can now be rotated automatically if “axis_x_tick_autorotate = true”. (only for type category)
2. If the rotation is set 0 < and < 90 there is a new function for calculating y2 axis overflow length of rotated x axis tick texts. (only for type category)

autorotate without y2 axis shown

autorotate with y2 axis shown

1. Following is not the part of the issue, but it were just 3 lines of code:

It resizes the x axis height if you hide all elements in the chart, which looks better instead of displaying empty space. This change also works for all three x axis types.

Autorotating works only if:

• axis_x_tick_multiline is set false
• axis_x_tick_culling is set false (because some issues with calculating the y2 axis overflow when texts are hidden)
• axis_x_type is set category

Y2 axis overflow will be calculated if:

• axis_x_tick_multiline is set false
• axis_x_tick_culling is set false
• axis_x_type is set category
• axis_x_tick_rotate is set 0 < value < 90

If you are ok with this changes, I can make a pull request for all of them. If there is something to clarify beforehand, we can do it before or within the pull request.

PS: As of some internet problems during writing this comment, I somehow closed and reopened the post, don’t ask me how 😄