Recharts: ResponsiveContainer warns when no initial dimension is provided

Dependencies check up

• 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