ResponsiveBar overlap on the X axis

Hello @nivo users, I have a very curious issue on the responsive bar that I want to show you. Everything is working as expected locally as you can see below:

But when deploying on Netlify the bars are overlapping on the X axis:

Is there something I’m missing ? Does anyone of you have an idea of where it might come from ? Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 87.0.4280.141

Additional context Here are my npm version of the tools I’m using:

        "webpack": "^5.4.0",
        "@nivo/bar": "^0.66.0",
        "@nivo/core": "^0.66.0",
        "react": "^17.0.1",
        "typescript": "^4.1.3",

Here the component I’m using :

export const BarChart = (props: Props) => {
    const { data, keys, indexBy, legendLeft, colors, labels, markers } = props;

    return (
        <ResponsiveBar
            data={data}
            keys={keys}
            margin={{ top: 50, right: 0, bottom: 50, left: 60 }}
            padding={0.3}
            indexBy={indexBy}
            valueScale={{ type: 'linear' }}
            indexScale={{ type: 'band', round: true }}
            colors={colors}
            label={labels}
            animate={false}
            axisBottom={{
                tickSize: 5,
                tickPadding: 5,
                tickRotation: 0,
                legendPosition: 'middle',
                legendOffset: 32
            }}
            axisLeft={{
                tickSize: 5,
                tickPadding: 5,
                tickRotation: 0,
                legend: legendLeft,
                legendPosition: 'middle',
                legendOffset: -40
            }}
            labelSkipWidth={12}
            labelSkipHeight={12}
            markers={markers}
        />
    );
};

export default BarChart;

[LucasEduardoRomero]

Same problem here! It happened with ResponsiveBar and ResponsiveLine.

When we put margin on bottom to show the tickValues and minValue is set, the bar just overflow.

With ResponsiveLine, we can see same effect if enableArea is True, and yScale.min is Set

Info

• “@nivo/bar”: “^0.67.0”,
• “@nivo/core”: “^0.67.0”,
• “@nivo/line”: “^0.67.0”,
• “@nivo/pie”: “^0.67.0”,
• “react”: “^16.13.1”,
• “typescript”: “^3.8.3”

Example Here

[GregdTd]

I was able to “somehow” fix the issue using the ResponsiveBarCanvas component instead of the ResponsiveBar… You lose the label on column but at least it looks like something… In another part of my app I used the Nivo API and it works perfectly so I strongly advise anyone encountering this kind of issue to give it a try !