Responsive bar chart height and position

Hi, I’m using the responsiveBar component and I did wrap it with a div with specific width and height, My issue is that the chart adjacent to the top of the div container and doesn’t stretch to all of the container.

I tried to change the position with styles on the div parent (flex and justify-content) but it doesn’t help.

  chartContainer: {
    height: "4rem",
    width: "5rem",
    margin: "0 auto",
    padding: "0.5rem 0",
    textAlign: "center",
  }

      <div className={classes.chartContainer}>
        <ResponsiveBar
          data={data}
          keys={keys}
          indexBy={getIndex}
          colors={colors}
          margin={{ top: 0, right: 0, bottom: 20, left: 0 }}
          enableLabel={false}
          enableGridX={false}
          enableGridY={true}
          gridYValues={0.5}
          isInteractive={false}
          padding={0.1}
          labelFormat=".0s"
          minValue={0}
          axisBottom={{
            tickValues: [`f1`, `f2`],
          }}
          axisTop={null}
          axisRight={null}
          axisLeft={null}
          animate={true}
        />
      </div>

[ariel-upstream]

I’ve tried to reproduce it and I don’t get this issue https://codesandbox.io/s/nivo-basic-demo-forked-x7ptv

I upgraded the version from 0.62 to 0.63 and it fixed. Thanks!

[plouc]

I’ve tried to reproduce it and I don’t get this issue https://codesandbox.io/s/nivo-basic-demo-forked-x7ptv