[bug]: chart not rendering

[ronijaat]

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

node-20
next-14

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[oleksii-sploro]

can you please send the code?

[jeremy-simplyscreens]

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]

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]

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

[borgogelli]

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]

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.
recharts/recharts#4558 (comment)

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]

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]

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]

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
#4231 (comment)

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]

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]

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]

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]

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

"First bug I found on GitHub."🫡

[SsyraxX]

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!

[RakeshPotnuru]

Removing the wrapper div worked for me (React 18, Next.js 14). I guess the chart needs to be a separate component.

[MoDev2002]

the issue for me was that the shadcn example used max-h-[250px] in the ChartContainer component, while the documentation states to use min-h-[your-height]. So, after replacing max with min everything worked correctly.

[vbylen]

for people using yarn this is what worked for me:

  "resolutions": {
    "react-is": "^19.0.0-rc-2d2cc042-20240809"
  },

[victorbr988]

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>
  )
}

[mohamedamara1]

I'm using a LineChart and the line is not rendering, Nextjs 14 and React 18

[ctff-kongchang]

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!

This is exactly what I did and Charts started working again, remove that plugin and uninstall that!

[victorbr988]

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 solved my problem, it turns out that in my data structure, the nameKey value was a string and not a number