Recharts 3: Some grid lines are missing on BarChart

[torokati44]

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.2.1

What package has an issue?

@mantine/charts

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

All

Describe the bug

See this chart at https://ruffle.rs/compatibility:

The same chart, after switching to Recharts 3:

Source at: https://github.com/ruffle-rs/ruffle-rs.github.io/blob/master/src/app/compatibility/weekly_contributions.tsx

Linking https://github.com/mantinedev/mantine/issues/8001 and https://github.com/ruffle-rs/ruffle-rs.github.io/pull/435.

Workaround - adding this invisible line makes the grid lines appear correctly again:

      <ReferenceLine
        y={0}
        stroke="transparent"
        ifOverflow="extendDomain"
      />

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

[danielhjacobs]

Minimal reproductions:

• Recharts 2, Mantine 8.2.0, no issue: https://codesandbox.io/p/sandbox/recharts-2-test-barchart-5sq67y (https://5sq67y.csb.app/)
• Recharts 3, Mantine 8.2.0, issue occurs: https://codesandbox.io/p/sandbox/practical-morse-86x2rf (https://86x2rf.csb.app/)
• Recharts 3, Mantine 8.2.0, issue worked around: https://codesandbox.io/p/sandbox/recharts-3-test-barchart-workaround-f97q75 (https://f97q75.csb.app/)

Code for reproduction copied from https://mantine.dev/charts/bar-chart/

[torokati44]

Thank you for making these! I can't access the third one though, it might be private.

[danielhjacobs]

Updated it now.

[danielhjacobs]

From https://github.com/recharts/recharts/issues/6149#issuecomment-3128694341:

You'll need to specify your yAxisId explicitly on the grid:

        <CartesianGrid
          strokeDasharray="5 5"
          vertical={false}
          horizontal={true}
          yAxisId="left"
        />

[danielhjacobs]

The breaking changes were updated: https://github.com/recharts/recharts/wiki/3.0-migration-guide#other-breaking-changes

CartesianGrid has new properties x/yAxisId that correspond to x/yAxisIds on the X/YAxis components respectively. With a different ID than default, CartesianGrid lines will fail to render. This makes the grid rendering deterministic rather than just selecting the first axis it finds

[danielhjacobs]

Until the issue is fixed, for anyone else who has this problem:

You can add gridProps={{ yAxisId: "left" }} to the LineChart/AreaChart/BarChart/ScatterChart/CompositeChart element if you use recharts 3.

[ceciiiron]

Until the issue is fixed, for anyone else who has this problem:

You can add gridProps={{ yAxisId: "left" }} to the LineChart/AreaChart/BarChart/ScatterChart/CompositeChart element if you use recharts 3.

This worked for me. Thanks!