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

extra space in long bar charts #2471

Closed
ph98 opened this issue Nov 21, 2023 · 1 comment
Closed

extra space in long bar charts #2471

ph98 opened this issue Nov 21, 2023 · 1 comment
Labels
📊 bar @nivo/bar package

Comments

@ph98
Copy link

ph98 commented Nov 21, 2023

Thanks for using nivo

Before creating an issue...

Are you asking a question?

Please don't file GitHub issues to ask questions.
Try to use the discord channel first: https://discord.gg/n7Ft74f.

Describe/explain the bug
A clear and concise description of what the bug is.

To Reproduce
Please include a test case that demonstrates the issue you're reporting on a platform like codesandbox, I already have several existing examples on codesandbox, you can fork one of them
depending on the component you're working on: https://codesandbox.io/u/plouc/sandboxes.
This is very critical to maintainers in order to help us see the issue you're seeing.

https://codesandbox.io/s/wispy-glitter-r392l6?file=/src/App.js

Steps to reproduce the behavior:

  1. apply an large array to the data source of the chart.

Expected behavior
A clear and concise description of what you expected to happen.

I expect the margin to be close to zero, but now it will be so high when we apply a large array.

Screenshots
If applicable, add screenshots to help explain your problem.
image

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

@plouc
Copy link
Owner

plouc commented Nov 22, 2023

Hi @ph98,

This is due to rounding on the index scale (which becomes quite noticeable with large charts), you can fix this by disabling it:

indexScale={{
    type: 'band',
    round: false,
}}

@plouc plouc closed this as completed Nov 22, 2023
@plouc plouc added the 📊 bar @nivo/bar package label Nov 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📊 bar @nivo/bar package
Projects
None yet
Development

No branches or pull requests

2 participants