Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Designs for rotated x-axis labels #7015

Closed
mazameli opened this Issue Feb 24, 2018 · 4 comments

Comments

Projects
None yet
2 participants
@mazameli
Copy link
Contributor

mazameli commented Feb 24, 2018

Sketch file (Metabase core team only)

These are designs for #6937, which is related to #2935.

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:

50 labels - 45 degrees

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:

100 labels - 90 degrees

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.

@SboissonPoligma

This comment has been minimized.

Copy link

SboissonPoligma commented Mar 9, 2018

Hello @mazameli ,
I would like to know how you succeeded to move X-axis labels from horizontal position to vertical and 90-degree-rotated position in your graph ? Is this feature in METABASE is working ?
I will be very glad to have your answer. Thanks a lot

@mazameli

This comment has been minimized.

Copy link
Contributor Author

mazameli commented Mar 9, 2018

Hi, @SboissonPoligma. Open issues that are labeled with Designs means that they are specifications for features that have not yet been built. We are looking to implement this x-axis rotation feature in the next version of Metabase.

@tlrobinson tlrobinson referenced this issue Mar 9, 2018

Merged

Better x axis label formatting [WIP] #7103

9 of 10 tasks complete
@SboissonPoligma

This comment has been minimized.

Copy link

SboissonPoligma commented Mar 13, 2018

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.

@mazameli mazameli added this to the 0.29 milestone Mar 22, 2018

@mazameli

This comment has been minimized.

Copy link
Contributor Author

mazameli commented Mar 22, 2018

Implemented in #7103

@mazameli mazameli closed this Mar 22, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.