[bug]: chart not rendering

ronijaat commented 2 weeks ago

Describe the bug

Hey, I am using charts, and everything was working fine, but now suddenly the pie chart is not rendering. This happens when I use two pie charts side by side. but it rendered the data. see the below image

charts-bug

Affected component/components

chart

How to reproduce

no

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

node-20
next-14

Before submitting

[X] I've made research efforts and searched the documentation
[X] I've searched for existing issues

oleksii-sploro commented 2 weeks ago

can you please send the code?

jeremy-simplyscreens commented 2 weeks ago

Check to make sure the ChartContainer component has a minimum height class or style attribute e.g: min-h-[300px]. The issue that I had was that I was using the tailwindcss aspect plugin. Removing this allowed my charts to render properly.

borgogelli commented 2 weeks ago

Same problem for me. No examples from shadcn-ui's docs works with next-js 15 and react 19. But if I use a recharts' official example, it works.

muhammetakalan commented 2 weeks ago

You might be experiencing this issue because Recharts is not yet compatible with React 19. If you have upgraded to React 19, you may need to wait for Recharts to update or revert to a compatible version to resolve the issue.

https://github.com/shadcn-ui/ui/issues/4231

borgogelli commented 2 weeks ago

You might be experiencing this issue because Recharts is not yet compatible with React 19. If you have upgraded to React 19, you may need to wait for Recharts to update or revert to a compatible version to resolve the issue.

4231

Rechart 2.13.0-alpha.4 with React 19.0.0-beta works fine with NextJs 15. Only shadcn's chart examples doesn't work.

dludemann commented 2 weeks ago

react-is is breaking in recharts 2.13.0-alpha.4 & react 19 / next 15.

You need to manually override this in your package.json

"dependencies": {
    "react-is": "19.0.0-rc-6f23540c7d-20240528"
},
"overrides": {
    "recharts": {
        "react-is": "$react-is"
    }
}

See below thread over at recharts. https://github.com/recharts/recharts/issues/4558#issuecomment-2135604065

Updating the above has shadcn charts working on my next 15 / react 19 project with recharts alpha.

May need to update below screenshot in the docs.

AlexSchwabauer commented 1 week ago

The charts are not visible for me as well.

Only when explicitly setting width and height props for the recharts Chart Component (e.g. BarChart or LineChart), the chart is visible. However, responsiveness is lost due to this. Seems like the ChartContainer wrapper around ResponsiveContainer does not work?

Any suggestions?

ryanburns23 commented 1 week ago

Check to make sure the ChartContainer component has a minimum height class or style attribute e.g: min-h-[300px]. The issue that I had was that I was using the tailwindcss aspect plugin. Removing this allowed my charts to render properly.

If you are using the @tailwindcss/aspect-ratio plugin, you can follow the instructions on the "Compatibility with default aspect-ratio utilities" section of the readme to support the default aspect-ratio utilities these charts rely on.

dludemann commented 1 week ago

The charts are not visible for me as well.

Only when explicitly setting width and height props for the recharts Chart Component (e.g. BarChart or LineChart), the chart is visible. However, responsiveness is lost due to this. Seems like the ChartContainer wrapper around ResponsiveContainer does not work?

Any suggestions?

See my above suggestion if you are using React 19 or Next 15 https://github.com/shadcn-ui/ui/issues/4231#issuecomment-2226782779

By forcing the rc version of react-is (which supports react 19 rc / 15 rc) the shadcn examples work out of the box and the ChartContainer is responsive for me using the min-h that shadcn tells you to.

react-is is a dependency for recharts that hasn't been updated yet in the recharts package. Hence, why you need to force the update.

emkooz commented 1 week ago

Running into the same issue here with React 19 + Next 15. Tried all of the suggestions posted so far and still cannot get a responsive chart to render.

Examples taken directly from the recharts docs render normally when explicitly setting width and height, however the ResponsiveContainer examples do not render.

Was able to reproduce on a new create-next-app project while trying all of the fixes above, tested on Firefox 128 and Chromium 125.0.6422.141.

AlexandreLrz commented 1 week ago

Same for me here with Next JS 14, React 18. I will investigate more during the day EDIT : I modified the ChartContainer component by removing the wrapper div and this solved the issue for me.

thanhlq commented 5 days ago

I got the same issue, charts are not visible (in shadcn examples) with Nextjs 15-rc and React 19-rc! (just a try) Working fine with Nextjs 14 and React 18

To reproduce: simple replace shadcn/apps/www/package.json with next: 15.0.0-rc.0 and react: rc and react-dom: rc

ronijaat commented 5 days ago

The main issue is that charts don't render correctly with dynamic data.

"First bug I found on GitHub."🫡

shadcn-ui / ui