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

[AdamConleyDSI]

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

Desktop (please complete the following information):

• OS: Windows 11
• Browser: I've tested on Firefox and Chrome
• Version: v0.85.1

[AdamConleyDSI]

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...

[AdamConleyDSI]

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]

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