[Bug]: AreaChart local component not show data

[ivanrodrigobanos]

Tremor Raw Component Version

0.3.1

Link to minimal reproduction

https://codesandbox.io/p/devbox/tj5w79

Steps to reproduce

Hello,

I'm using the AreaChart component in NextJS, which I installed following these instructions: https://tremor.so/docs/visualizations/area-chart

And I've seen that it doesn't show anything.

But if I use the same component via npm: "@tremor/react" the chart does appear, although the legend and tooltip don't look very good.

You can reproduce it from the following codesandbox: https://codesandbox.io/p/devbox/tj5w79 so you can see the difference.

I hope it helps you solve the problem.

What is expected?

Which will display the graph as seen in the examples. Or at least the same "@tremor/react" component would appear the same as in the examples.

What is actually happening?

The graph is not displayed with the component installed locally.

And with the "@tremor/react" component the graph is displayed but there are styles that are not displayed correctly.

What browsers are you seeing the problem on?

Chrome

Any additional comments?

I am using the component with NextJS 15.2.0

[sakilanwar12]

I also faced this issue, not with the Tremor component, but with an area chart in ApexCharts. In local development, the chart didn't look good when the data updated, but it worked fine in production. After investigating, I found that the issue was caused by React's Strict Mode in development. I solved it by updating the component key in development mode, and now it works perfectly.

[ivanrodrigobanos]

Sorry, I don't understand the phrase: "updating the component key in development mode". Do you put the "key" property in the AreaChar component?

[sakilanwar12]

you can update chartKey with useState hook , it will perfectly update your chart in development mode
<Chart key={chartKey} options={getOptions({ categories, seriesTitle, })} series={series} type="area" height={height} width="100%" />

[ann0nip]

I have the same issue. I tried using the component key, disabling strict mode, and following this solution:

[GitHub Issue Comment](#114 (comment))

But nothing works.

[sakilanwar12]

you can send me your code, I hope i will fix the issue

[ivanrodrigobanos]

You can reproduce it from the following codesandbox: https://codesandbox.io/p/devbox/tj5w79