-
Notifications
You must be signed in to change notification settings - Fork 30
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
Bar chart to skip x-axis labels like Linear charts #1777
base: main
Are you sure you want to change the base?
Conversation
We likely won't merge this because we don't want to remove labels in |
Thanks @envex , that's understandable. What if it's configurable instead? What you say makes sense, but there's still use cases similar to Google Cloud's billing charts, which we can render both as Linear and Bar charts, but it would also skip dates if the screen is narrow (I'm hiding the Y-Axis on purpose on those screenshots, but they're also here): ![]() ![]() I think it's a common use case to use Bar rendering even for Linear data like dates, WDYT? |
@carysmills Any thoughts on making this a prop? |
I think we should talk to UX and see if this is behaviour we want for linear bar charts. If so, I'm not opposed, but I would like to add as little complexity/options to the charts as possible |
Hey @carysmills , just following up to see if you have any news about this 😄 Happy to update the PR if needed as well! |
What does this implement/fix?
With Linear charts, the X-Axis displays labels nicely even if the width does not fit them all. It smartly displays less and less labels as it can, until it can no more show any of them.
However for Bar charts, it behaves differently. If all the labels can't fit within the width, it simply displays none of them. With this PR, it changes this behaviour to be similar to the Linear charts.
I have created a new story for Bar Charts,
Monthly Reports
, to show an example with a typical use case, showing a 30-days monthly report.Does this close any currently open issues?
No
What do the changes look like?
Storybook link
Before merging
Check your changes on a variety of browsers and devices.
Update the Changelog's Unreleased section with your changes.
Update relevant documentation, tests, and Storybook.
Make sure you're exporting any new shared Components, Types and Utilities from the top level index file of the package