-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[bug]: chart not rendering #4231
Comments
can you please send the code? |
Check to make sure the |
Same problem for me. No examples from shadcn-ui's docs works with next-js 15 and react 19. |
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. |
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. |
You need to manually override this in your package.json
See below thread over at recharts. Updating the above has shadcn charts working on my next 15 / react 19 project with recharts alpha. |
The charts are not visible for me as well. Only when explicitly setting Any suggestions? |
If you are using the |
See my above suggestion if you are using React 19 or Next 15 By forcing the rc version of
|
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 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. |
Same for me here with Next JS 14, React 18. I will investigate more during the day |
I got the same issue, charts are not visible (in shadcn examples) with Nextjs 15-rc and React 19-rc! (just a try) To reproduce: simple replace shadcn/apps/www/package.json with next: 15.0.0-rc.0 and react: rc and react-dom: rc |
The main issue is that charts don't render correctly with dynamic data. "First bug I found on GitHub."🫡 |
Goodmorging at least for me, I encountered the same issue where the Shadcn chart would not render, and I managed to solve it after through investigation. The primary problem seemed to be that wrapping a div, card, or any other element outside the ChartContainer prevents the chart from rendering. I tried the suggestion by AlexandreLrz to remove the wrapper div, which worked temporarily but wasn't an ideal solution for my needs. To get to the bottom of this, I created a new Next.js 14 app and meticulously set it up by installing charts, shadcn, Tailwind CSS, and other necessary dependencies. Upon rendering a chart, it worked perfectly fine! I didn't stop there. I conducted a comprehensive comparison of the package.json, tailwind.config.js, and other configuration files between my new working setup and the problematic one. I examined dependencies, configurations, and potential conflicts thoroughly. After extensive debugging, I discovered that removing require("@tailwindcss/aspect-ratio") from the plugins section in tailwind.config.js resolved the rendering issue. Once this line was removed, the charts rendered flawlessly without any further problems. To double-check, I added the aspect-ratio plugin to the new app, which caused the chart to stop rendering. This confirmed that the plugin was the culprit, interfering with the ChartContainer in some way. I hope i save some debug time for you guys to day! |
Removing the wrapper div worked for me (React 18, Next.js 14). I guess the chart needs to be a separate component. |
the issue for me was that the shadcn example used |
for people using yarn this is what worked for me: "resolutions": {
"react-is": "^19.0.0-rc-2d2cc042-20240809"
}, |
My chart not render with dynamic data, I am using React 18 and this is my code: export function PieChartCustom({ chartData = [], datakey, namekey }) {
return (
<ChartContainer
config={chartConfig}
className="min-h-[250px]"
>
<PieChart>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent hideLabel />}
/>
<Pie data={chartData} dataKey={datakey} nameKey={namekey} />
</PieChart>
</ChartContainer>
)
} |
I'm using a LineChart and the line is not rendering, Nextjs 14 and React 18 |
This is exactly what I did and Charts started working again, remove that plugin and uninstall that! |
I solved my problem, it turns out that in my data structure, the nameKey value was a string and not a number |
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
Affected component/components
chart
How to reproduce
no
Codesandbox/StackBlitz link
No response
Logs
No response
System Info
Before submitting
The text was updated successfully, but these errors were encountered: