ResponsiveBar: large space between axis y and the first bar

[barnapisti1994]

Describe/explain the bug
In case of using large datasets with ResponsiveBar the distance between axis y and the first bar is too large for some widths.

To Reproduce
I created a demo on Code Sandbox. As you resize the display area the distance between axis y and the first bar changes and it becomes too large for some sizes.
https://codesandbox.io/s/nivo-bar-tick-formatting-demo-j1zf9?file=/index.js

Expected behavior
The distance between axis y and the first bar doesn't become unproportionally large when resizing.

Screenshots

[drodmun]

Same problem here, the bigger the data, the proportionally bigger the distance

[AlphaSpectrum]

I also observed that all of the bars will compress into one single spot right in the middle of the graph at around 406 bar elements

[mateusscm]

Anyone find a solution?

[barnapisti1994]

I ran through the related code a few weeks ago when I created this issue. I think it is caused by the calculations made by the d3 library but I'm not 100% sure.

[immanuelfodor]

Same issue here, it doesn't look good, and I couldn't find any solution apart from making excuses to complaining customers that it needs a fix from Nivo 😞

[ldd]

Question for people affected by this: have you considered using a Line graph?

From The example you provided:

source (forked codesandbox code from your example): https://codesandbox.io/s/nivo-bar-tick-formatting-demo-jso1b?file=/index.js:0-35617

I mention this because I remembered having had exactly the same issue in a couple of other libraries until it hit me: once you have a lot of data points, it makes more sense to just use a line graph to display your values. I think that's how I solved some graph issues here

[drodmun]

@barnapisti1994 add the label:":bar_chart: bar" so appear as an open issue for that and let's hope it gets fixed soon

[immanuelfodor]

@drodmun I think only contributors can add labels to issues.

[abourtnik]

Any news for this issue ?

[immanuelfodor]

No progress here 😢

[wyze]

I think this is related to #840. If so there is a PR in the works to get this solved.

[wyze]

Looks to be fixed by #1282 and will be available in the next version. See here: https://codesandbox.io/s/nivo-forked-y50jx

[nightwolf-041]

Looks to be fixed by #1282 and will be available in the next version. See here: https://codesandbox.io/s/nivo-forked-y50jx

it's not fixed yet :/

[wyze]

@nightwolf-041 Please provide a new sandbox link with your code as the original issue here with the sandbox is not experiencing the issue.

[SamuelBrander]

A fix that worked in my case is to add "indexScale={{ type: "band", round: false }}" to the props of the chart.

The default for a Nivo Bar Chart seems to be "indexScale={{ type: "band", round: true }}". Based on the source code of nivo, particularly https://github.com/plouc/nivo/blob/master/packages/scales/src/bandScale.ts, Nivo uses the D3 scale band. If round is set to true, all the measurements in the chart are rounded down from floats to integers:

"band.round — and the shorthand notation band.rangeRound — give the results as integer values, using Math.floor() to avoid overflowing the range. This will usually leave some unused space, that must be allocated to the left and right padding (even if those have been set to 0). Align them with band.align."

It seems that in the case of hundreds of data points, and a slim enough display (say, 1080 pixels of screen width for 300 data points) this unused space grows quite large. Feel free to correct me in case my assumptions are wrong, but the fix works on my end.

[raktim-sg]

The above solution by @SamuelBrander resolved the issue for me.

[SteveAtKlover]

worked for me too. thanks :)