[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

[ErekleModebadze]

I have same problem

[RomaLetodiani]

I have same problem

Genacvale

[jvandenaardweg]

The issue probably lies in how <defs> is used. The provided examples are just wrong in how they map over the data and how the components are rendered.

Example: https://tremor.so/docs/visualizations/area-chart

When you move the <defs> outside the map, and the <Area> in it's seperate map, it works:

From:

{categories.map((category) => {
  return (
    <React.Fragment key={category}>
      <defs>
        <linearGradient />
      </defs>
      <Area />
    </React.Fragment>
  )
})}

To:

<defs>
  {categories.map((category) => {
    return <linearGradient key={category} />;
  })}
</defs>

{categories.map((category) => {
  return <Area key={category} />;
})}

It's also how Recharts does it: https://recharts.org/en-US/api/AreaChart

So you should end up with something like:

<AreaChart>
  <XAxis />
  <YAxis />
  <defs>
    <linearGradient>
      <stop />
      <stop />
    </linearGradient>
    <linearGradient>
      <stop />
      <stop />
    </linearGradient>
  </defs>
  <Area />
  <Area />
</AreaChart>

[ErekleModebadze]

Just adding this to package.json fixed the issue:

"overrides": {
  "react-is": "^19.0.0"
}

Don’t forget to run npm install and restart your Next.js app after the change. ✅

[RomaLetodiani]

@ErekleModebadze Genacvale

[tifandotme]

Encountered same problem, fixed with @ErekleModebadze solution.

Is Tremor still maintained?