Mantine AreaChart showing points but not lines neither legend

[sleepynight2024]

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?

7.17.1

What package has an issue?

@mantine/charts

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Chrome

Describe the bug

I am trying to use Percent AreaChart and here is my implementation

<AreaChart
                                h={300}
                                data={[
                                    { day: 'Mar 12', errors: 0, sha256s: 0 },
                                    { day: 'Mar 11', errors: 0, sha256s: 0 },
                                    { day: 'Mar 10', errors: 0, sha256s: 0 },
                                    { day: 'Mar 09', errors: 48, sha256s: 1662 },
                                    { day: 'Mar 08', errors: 0, sha256s: 0 },
                                    { day: 'Mar 07', errors: 0, sha256s: 0 },
                                    { day: 'Mar 06', errors: 0, sha256s: 0 },
                                ]} // Ensure data exists before rendering
                                tooltipAnimationDuration={200}
                                dataKey="day"
                                series={[
                                    {name: "errors", label: "Errors", color: "red.6"}, // Match backend key
                                    {name: "sha256s", label: "SHA-256s", color: "blue.6"}, // Match backend key
                                ]}
                                type="percent"
                                curveType="bump"
                                tickLine="x"
                                gridAxis="x"
                                withDots={true}
                                withLegend={true}
                            />

and I also added import '@mantine/core/styles.css'; and import '@mantine/charts/styles.css'; to _app.tsx but here what I get:

It looks like the points and days are fine, but there is no legend, and no labels are shown in the tooltip. I also tried to change the type and curveType but always the same issue, I am not sure if I am missing some CSS imports here

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

No response

Possible fix

No response

Self-service

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

[rtivital]

See #7220