docs(v4): add recharts v3 upgrade notes

This commit is contained in:
shadcn
2026-03-23 13:33:25 +04:00
parent 6a4b27b80d
commit 4a3a622bfe
2 changed files with 18 additions and 12 deletions

View File

@@ -5,12 +5,6 @@ base: base
component: true
---
<Callout>
**Recharts v3:** The `chart` component now targets Recharts v3. Use `ChartTooltip.defaultIndex` for initial tooltip state, but keep persistent active shapes in your own chart state. Also remove `layout` from `<Bar>` when `BarChart` already sets it, and keep a height or `min-h-*` on `ChartContainer`.
</Callout>
<ComponentPreview
styleName="base-nova"
name="chart-demo"
@@ -51,6 +45,15 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
**The components are yours**.
## Updating to Recharts v3
If you're upgrading existing charts from Recharts v2:
- Use `ChartTooltip.defaultIndex` for initial tooltip state.
- Keep persistent active shapes in your own React state and render them with `shape` or `activeShape`.
- Remove `layout` from `<Bar>` when `BarChart` already sets it.
- Keep a height or `min-h-*` on `ChartContainer` so the chart can measure correctly.
## Installation
<CodeTabs>

View File

@@ -5,12 +5,6 @@ base: radix
component: true
---
<Callout>
**Recharts v3:** The `chart` component now targets Recharts v3. Use `ChartTooltip.defaultIndex` for initial tooltip state, but keep persistent active shapes in your own chart state. Also remove `layout` from `<Bar>` when `BarChart` already sets it, and keep a height or `min-h-*` on `ChartContainer`.
</Callout>
<ComponentPreview
styleName="radix-nova"
name="chart-demo"
@@ -51,6 +45,15 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
**The components are yours**.
## Updating to Recharts v3
If you're upgrading existing charts from Recharts v2:
- Use `ChartTooltip.defaultIndex` for initial tooltip state.
- Keep persistent active shapes in your own React state and render them with `shape` or `activeShape`.
- Remove `layout` from `<Bar>` when `BarChart` already sets it.
- Keep a height or `min-h-*` on `ChartContainer` so the chart can measure correctly.
## Installation
<CodeTabs>