fix: [React 19] Fix BarChart Rendering Issue with XAxis Height #1075
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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