BarChart: Rendering issues with more than 220 bars in one chart

[joseph-mccombs]

Describe/explain the bug
In using barChartResponsive and barChartCanvas, there is inconsistent renders of the actual barChart when the number of bars exceeds certain limits. Once there are roughly > 220 bars in one chart, the chart itself can have excess space in between the y axis on both the left and right side. Once there are roughly > 450 bars in one chart, absolutely nothing will render to the screen except the x-axis labels

To Reproduce
To reproduce see the following code sandboxes:

A. Excess padding on both right and left side of the chart (220 bars in one graph)

• Code Sandbox: https://codesandbox.io/s/nivo-bar-chart-220-bars-excess-padding-left-and-right-zjjz4m

To reproduce this in your own code:

1. Create a ResponsiveBar or ResponsiveBarCanvas component and have > 220 unique bars
2. This does not always happen, but more often than not with > 220 bars there will be excess padding in your chart

B. No chart render at all ( >450 bars on one chart)

• Code Sandbox: https://codesandbox.io/s/nivo-bar-chart-450-bars-no-bars-render-fje38j

To reproduce this in your own code:

1. Create a ResponsiveBar or ResponsiveBarCanvas component and have > 450 unique bars
2. This does not always happen, but more often than not with > 450 bars there will be no chart rendered to the screen

Expected behavior
In both cases, i would expect a bar chart to render to the screen with no excess padding between the y axis (left and right side) regardless of how small the bars may be.

Screenshots
Issue A (from code sandbox > 220 bars && < 450 bars):

Issue B (from code sandbox > 450 bars):

Expectected Behavior (in both circumstances):

Desktop (please complete the following information):

• OS: MacOs
• Browser Chrome and FireFox (Only ones tested)
• Version: 0.79.1

Additional context
I noticed that in Issue A (> 220 bars && < 450 bars) that the first bar was translated further than in a normal behaving barChart, believe this may have something to do with it. I tried to adjust my margin on the chart, but that did not remedy the situation.

I believe that these two issues are connected as both have to do with too many bars in a bar chart, I can split them out into separate issues if that is required and desired.

[plouc]

@joseph-mccombs, I don't think the codesandbox links are up to date, I only see 3 bars for both.

Regarding the extra margin, please see #840.
Please also note that when having many bars, it can be an issue if bars are < 1px.

[joseph-mccombs]

hi @plouc, thanks for responding. I updated the code sandboxes and both are exhibiting the behavior i mentioned in the issue. Any guidance would be greatly appreciated.

[cryptoTeq]

Hi. I'm having the same issue with the bars and columns. I have around 3000 data points and it gets the same result as joseph-mccombs.

Any help would be GREATLY appreciated.

[raktim-sg]

I am also facing the issue B as mentioned by @joseph-mccombs. I have 17000 bars, and as I cross 690 bars, I see that the last bar is simply not drawn at-all, any suggestions to fix this will help. @plouc please have a look as we use this chart a lot in our production code.

[joseph-mccombs]

Can we reopen this? It did not get solved and is still an issue. Multiple reports, would be great and seems like a core feature of a bar chart that should be investigated. Tagging @plouc, If you have any advice, I can try to make a pull request to address the issue as well.

[plouc]

Regarding the extra padding, as mentioned in #840 (comment), you can disable rounding, please see https://codesandbox.io/s/nivo-bar-chart-220-bars-excess-padding-left-and-right-forked-kmhe6q?file=/src/index.js.

Regarding the bars not rendering, same fix, please see https://codesandbox.io/s/nivo-bar-chart-450-bars-no-bars-render-forked-8n5xgk?file=/src/index.js.

[plouc]

Fixed by #1282.

[plouc]

Also now bars <1px are also rendered.

[joseph-mccombs]

Thanks so much @plouc !