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

Stacked bar value labels are too close each other #2092

Open
Tracked by #2155
markov00 opened this issue Jul 6, 2023 · 1 comment
Open
Tracked by #2155

Stacked bar value labels are too close each other #2092

markov00 opened this issue Jul 6, 2023 · 1 comment
Labels
bug Something isn't working :chart Chart element related issue needs design A design pass is required and not available :xy Bar/Line/Area chart related

Comments

@markov00
Copy link
Member

markov00 commented Jul 6, 2023

Describe the issue
If a stacked bar chart is rendered with the value labels on, there could be cases where the value of two or more consecutive bars are too close together that they will look like a single number.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://codesandbox.io/s/relaxed-joliot-qtm2ly?file=/src/App.tsx

Expected behaviour
We should find a way to push back/pad/separate consecutive value labels to avoid creating the confusion illustrated in the screenshot below

Screenshots

Screenshot 2023-07-06 at 16 35 01
@markov00 markov00 added bug Something isn't working :chart Chart element related issue :xy Bar/Line/Area chart related needs design A design pass is required and not available labels Jul 6, 2023
@gvnmagni
Copy link

Little preliminary design note: given the unpredictable amount of space available for labels it is probably impossible (or at least extremely complicated) to find a simple way to deal with labels outside of bars, taking some space from the surrounding area of the bars to display numbers.

We should definitely investigate for the best solution possible, in the meanwhile, in order to avoid cases as the one described, I would suggest to display numbers only where there is enough space within the bar to do that with a decent amount of space for margins, otherwise readability would be compromised.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working :chart Chart element related issue needs design A design pass is required and not available :xy Bar/Line/Area chart related
Projects
None yet
Development

No branches or pull requests

2 participants