[vis] fix axis labels display

[ascott]

• if it's a time series, rotate labels 90 (we may want to do this for all x axis labels in the future for consistency)
• once rendered measure the length of the formatted label text and adjust margins to accommodate

fixes: #1971

before

after

before

after

plz review @airbnb/superset-reviewers

[vera-liu]

Would rotating 45 degrees make it more readable?

[ascott]

rotating 45 degrees makes the chart a bit smaller since we have to increase the right margin to accommodate the last label. when i look at these side by side, i think 90 degree labels work much better. @elibrumbaugh do you have any thoughts on this? @mistercrunch @vera-liu which do you think works better?

vs.

[elibrumbaugh]

Thanks for sharing this with me @ascott! From a legibility perspective, I think 45° works better than 90° here. However, the shrinking of the graph is an issue. If I had to trade off I would keep the labels 45° and allow the graph to be pushed in. One way I've seen this solved (sort of) in the past is to truncate long labels from the middle or end that are rotated 45°. For example: 1985-01-01 00:00:00 is 1985...00:00. On hover the entire label could be shown. This could also be a toggle to turn them on and off.

[ascott]

one other alternative, 60 degree rotation.

vs 45 degrees

[ascott]

sync'd with @elibrumbaugh on 60 vs 45. we will stick with 45 since it's more standard within our app and others.