Nivo responsive bar chart x-axis overflow with minValue and maxValue

I am having an issue with the Nivo responsive bar chart. I have set the "minValue" and the "maxValue" in my chart props per the documentation. The data passed to the chart contains valid in range values of the "minValue" and "maxValue."

When manually specifying "minValue" and "maxValue" the bars overflow on the x-axis and do not display properly.

A little context... I don't want to set the "minValue" and "maxValue" as "auto" because I need to show the floor and ceiling of the possible numbers. Setting it "auto" will cause the chart to automatically calculate the min and the max values based on the lowest and highest number in the dataset. The bars display correctly on the x-axis and don't overflow when using the "auto" setting.

Does anyone know why the bars don't display properly when specifying custom "minValue" and "maxValue"? Any ideas on what might be wrong?

Demo Here

You have to set the clamp value to true in your valueScale property, ie:

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