Automatically rotate x-axis labels for ordinal x-axes

Description: What is it?

For x-axes that are strings (ordinal values) we should rotate the labels 45 degrees once there are too many to display horizontally without overlapping.

Then, once the labels overlap at 45 degrees, we should rotate them to 90 degrees.

Once the 90 degrees values start overlapping, we should show no labels at all.

Problem: What problem does this solve?

When there are too many x-axis values on a chart, then you end up with values that are missing.

This is fine if you’re in Lightdash because you can hover over the values, but if you’re sharing these charts externally, you can’t see the values on the x-axis making the charts illegible (if they’re ordinal values - i.e. not continuous ones like dates or continuous numbers)

What: Roughly, what does this look like in the product?

• The chart has ordinal values on the x-axis (let’s simplify this and just say string values)
• If the labels are overlapping being horizontal, we shift them to 45 degrees
• If the labels are overlapping at 45 degrees, we shift them to 90 degrees
• If the labels are overlapping at 90 degrees, we remove the labels

[ZeRego]

There is a echarts ticket for this feature request

[JohnRomanski]

Suggest that you make this an option that is configurable by the user: Horizontal, angled 45 degrees right, left, vertical. Note that not all columns need labels, especially for time series.