-
Notifications
You must be signed in to change notification settings - Fork 465
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
fix: [React 19] Fix BarChart Rendering Issue with XAxis Height #1075
base: main
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
This helps the graph render, but the x axis labels are hidden now by default. |
:0 oh can you tell me more about that? i see that you have an issue #4586 |
Hi @soyricardodev, thanks for reporting. You wrote: "... susceptible to returning NaN in certain scenarios". Can you elaborate what in wich scenarios you got this error? Thanks! |
Hi @severinlandolt , thanks for answer. The scenario is React 19, here is a repo with react 19 and next 15 where you can debug the error and see: Repo |
Description
This PR fixes a bug where the
height
prop of theXAxis
component inBarChart.tsx
could result in a NaN value, causing a warning message ("Received NaN for the height attribute") and don't rendering bar charts in react 19.Problem:
The original code (
height={rotateLabelX?.xAxisHeight}
) was susceptible to returningNaN
in certain scenarios.Solution
This PR introduces a default value (
0
) using the nullish coalescing operator (??
). This ensures a valid height is always set, preventing the warning and potentially improving rendering of BarCharts.Related issue(s)
tremorlabs/tremor#1054
What kind of change does this PR introduce? (check at least one)
Does this PR introduce a breaking change? (check one)
If yes, please describe the impact and migration path for existing applications:
How has this been tested?
I've tested this fix in a personal project using Tremor components locally. You can find the project repository here: soyricardodev/theliaison
The relevant code changes can be found in the
src/components/tremor
directory. While the code is not fully polished or organized, it demonstrates the approach I took to resolve the issue in my local environment and highlights the simplicity of the fix.Screenshots (if appropriate):
The PR fulfils these requirements:
main
branch