Recharts: ResponsiveContainer warns when no initial dimension is provided

[chclt]

Dependencies check up

• [x] I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

8.3.5

What package has an issue?

@mantine/charts

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Chrome

Describe the bug

Running mantine.dev/charts code locally always gives me warnings from Recharts:

After searching, the warning comes from the ResponsiveContainer component of Recharts: https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx#L196-L216

ResponsiveContainer requires width and height to be passed in as props.

Using AreaChart directly as shown in @mantine/charts documentation examples will trigger a warning:

<AreaChart
  h={300}
  data={data}
  dataKey="date"
  series={[
    { name: 'Apples', color: 'indigo.6' },
    { name: 'Oranges', color: 'blue.6' },
    { name: 'Tomatoes', color: 'teal.6' },
  ]}
  curveType="linear"
/>

We need to pass height to the container to avoid triggering the warning:

<AreaChart
  attributes={{
    container: {
       height: 300,
    },
  }}
  h={300}
  data={data}
  dataKey="date"
  series={[
    { name: 'Apples', color: 'indigo.6' },
    { name: 'Oranges', color: 'blue.6' },
    { name: 'Tomatoes', color: 'teal.6' },
  ]}
  curveType="linear"
/>

However, not all charts provide the attributes property. For example, DonutChart does not have this property, so this warning cannot be avoided.

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

Maybe pass w / h to ResponsiveContainer's width / height?

Self-service

• [ ] I would be willing to implement a fix for this issue

[TobiasWust]

It would be nice, to have <ResponsiveContainer {...containerProps} {...getStyles('container')}> for all the Charts - like we have legendProps and xAxisProps etc. - so we could add something like initialDimension later

[rtivital]

I cannot reproduce this issue with Recharts 2.x. Probably it is only applicable if you use recharts 3.x. All recharts 3.x issues are planned to be resolved in Mantine 9.0 release coming next year. If you want a workaround now, try downgrading to Recharts 2.x, if that does not help, please provide a sandbox with a minimal reproduction.