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

X gridlines extend past the bottom of the chart into tick labels #2568

Closed
AdamConleyDSI opened this issue Apr 25, 2024 · 3 comments · Fixed by #2578
Closed

X gridlines extend past the bottom of the chart into tick labels #2568

AdamConleyDSI opened this issue Apr 25, 2024 · 3 comments · Fixed by #2578

Comments

@AdamConleyDSI
Copy link

Describe/explain the bug
With a simple ResponsiveBarCanvas chart, if I turn on the enableGridX feature, the vertical lines extend below the bottom of the chart, into the area where tick labels are. I've hunted and searched and I can't find a "stop at the bottom" property. I'm certain I'm missing something simple, but I just can't figure it out. The only thing I've got turned on is margins, which I need to even be able to see the tick labels. I've tried setting minValue to 0 since that works for my data, but no change.

To Reproduce
Please have a look at this codesandbox for reproduction: https://codesandbox.io/p/sandbox/cranky-night-nvmpgg?file=%2Fsrc%2Findex.tsx%3A39%2C1

Expected behavior
I would expect that the lines stop at the bottom of the bars, especially since I have no negative numbers.

Screenshots
image

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser: I've tested on Firefox and Chrome
  • Version: v0.85.1
@AdamConleyDSI
Copy link
Author

AdamConleyDSI commented Apr 25, 2024

I just noticed that this also happens on the Bar Canvas demo on the demo site: https://nivo.rocks/bar/canvas/
so maybe I'm not missing something...

image

@AdamConleyDSI
Copy link
Author

Doing a little more fiddling, if I change the top margin on the demo to -50 (instead of 50), the gridlines don't extend into the label area, so it seems like the grid doesn't take into account the margins when being drawn. The same thing happens with the Y gridlines (horizontal lines) on the demo: if you enable the legend, the gridlines plow right through it. I glanced at the BarCanvas code and it calls renderGridLinesToCanvas without accommodating the margins, so maybe it is a simple fix...?

@plouc
Copy link
Owner

plouc commented May 1, 2024

@AdamConleyDSI, yes, the problem is that I was passing width and height rather than innerWidth and innerHeight.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants