Join GitHub today
Designs for rotated x-axis labels #7015
Sketch file (Metabase core team only)
There's nothing new about this approach, but for discontinuous x-axes (i.e. not dates or continuous number ranges), I'm proposing we rotate the labels 45 degrees once there get to be too many to display without them colliding.
This is an example with 50 distinct x-axis values:
I'm also proposing that once we get to a certain threshold of distinct x-axis values (TBD what that exact number is), we go ahead and rotate the labels 90 degrees to get them to fit. This really probably has more to do with the width of the bars, i.e. the relationship to the number of distinct values vs. the amount of space in the current viewport. Here's an example with 100 labels at 1440px width:
Beyond this level of density, there will probably be a point where we should honestly just not show the x-axis marks at all, i.e. once the 90-degree-rotated labels start colliding.
Hi, @mazameli thanks a lot for your answer, I know that open issues means features haven't been built yet. But I would like to know how you succeeded designing the dataviz in your messages above. Did you use your own CSS ? In spite of everything, I will wait impatiently next update.