X-axis grid lines not displaying correctly (only top and bottom lines visible) in v7.17.8 | Mantine | Page 1

bright wave Jul 25, 2025, 3:03 PM

#

Hi! I'm using the charting library (version 7.17.8), and I'm having issues with the x-axis lines — only the top and bottom lines are showing, but not the grid lines in between.
Has anyone else experienced this or knows how to fix it?

Thanks in advance!

lusty briar Jul 27, 2025, 4:00 PM

#

bright wave Hi! I'm using the charting library (version 7.17.8), and I'm having issues with ...

Downgrade recharts to 2.x

prisma horizon Jul 28, 2025, 3:44 PM

#

Reported in https://github.com/mantinedev/mantine/issues/8110.

prisma horizon Jul 28, 2025, 6:38 PM

#

Looks like it's actually the yAxisId:

https://stackblitz.com/edit/react-qhmqzn5t?file=src%2FExample.tsx&showSidebar=0

If you switch to recharts 2.15.4 or remove the yAxisId="left" line or add an invisible reference line, the y-axis lines all show.

prisma horizon Jul 28, 2025, 7:11 PM

#

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"
        />

#

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

#X-axis grid lines not displaying correctly (only top and bottom lines visible) in v7.17.8