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

[michkami]

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]

Hi @michkami, thanks for the suggestion and looks very nice to be implemented.

The basic determination for weather a feature will be added as plugin or integrated option are:

• The code size

  If the added code size is minimal, then no issue to be added to the core

• The general functionality & frequency of the usage

  Even code size is minimal, but the functionality is not something used very frequently for every user, considering as separate plugin is more reasonable in this case.

[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

3. 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 :D

[netil]

@michkami, looks great!

No issue, except the constraint of axis_x_type is set category. It'll be useful if is applicable for timeseries type also.

Timestamp strings is usually is too wide, so adjusting this automatically would be great.

[michkami]

Is there any special use for this condition @netil ?

Axis.js 246:9

if (fit || (count && fit)) {
    values = this.generateTickValues(
        $$.mapTargetsToUniqueXs(targets),
        count,
        $$.isTimeSeries()
    );
}

Is it correct that when axis_x_tick_fit is set to false that axis_x_tick_count is ignored?
Shouldn't it be if (fit || count) or is it supposed to work same as if (fit) and then the if expression is just over complicated without a point?

[netil]

@michkami, checkout #795.

• https://github.com/naver/billboard.js/pull/795/files#diff-42d17674a7066557f10c42e0aa6436ffR223

[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 📦🚀