ResponsiveBar - Custom minValue/maxValue axisBottom overflow

[eschoni]

Overview
I am reporting an issue which I believe to be a bug with the ResponsiveBar component. I have read the ResponsiveBar documentation thoroughly. I believe the code I have is properly configured per the docs. Under the base section of the documentation there is the minValue and maxValue props which are set to "auto" by default. I am specifying custom number values for the minValue and maxValue.

Describe/explain the bug
The ResponsiveBar component bars overflow on the axisBottom when specifying custom number values for the minValue and maxValue props. There appears to be an issue with the bars calculating/rendering properly for the minValue causing the bottom of each bar to overflow beyond the minValue on the axisBottom of the chart.

To Reproduce
Here is the Codesandbox where I have included a minimal example to reproduce the issue.

Expected behavior
The bars in the chart should render properly based on the minValue/maxValue passed to the component and not overflow on the axisBottom.

Screenshots

Desktop

• macOS Version 12.6 (Build 21G115)
• Chrome 108.0.5359.124 (Official Build) (arm64)
• @nivo/core (0.80.0)
• @nivo/bar (0.80.0)

[eschoni]

Posted this question on Stack overflow and the user Scott Murphy had the answer. When specifying the min and max value you must include the "clamp: true" prop VIA valueScale for the chart to render properly when using custom min/max values.

<ResponsiveBar ... valueScale={{ type: 'linear', min: minVal * 0.8, max: maxVal * 1.2, clamp: true }} ... />

I didn't see that property anywhere in the docs.

I have update the Codesandbox example to reflect this.

Hopefully this helps someone else facing the same issue.

[jarvin95]

Posted this question on Stack overflow and the user Scott Murphy had the answer. When specifying the min and max value you must include the "clamp: true" prop VIA valueScale for the chart to render properly when using custom min/max values.

<ResponsiveBar ... valueScale={{ type: 'linear', min: minVal * 0.8, max: maxVal * 1.2, clamp: true }} ... />

I didn't see that property anywhere in the docs.

I have update the Codesandbox example to reflect this.

Hopefully this helps someone else facing the same issue.

Owe you one, my man! Saved me hours