From 4a3a622bfe9d0c9ba47d4c55c0fd70322bcc7ede Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Mon, 23 Mar 2026 13:33:25 +0400
Subject: [PATCH] docs(v4): add recharts v3 upgrade notes

---
 apps/v4/content/docs/components/base/chart.mdx  | 15 +++++++++------
 apps/v4/content/docs/components/radix/chart.mdx | 15 +++++++++------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/apps/v4/content/docs/components/base/chart.mdx b/apps/v4/content/docs/components/base/chart.mdx
index c9a015271b..e97944dbaf 100644
--- a/apps/v4/content/docs/components/base/chart.mdx
+++ b/apps/v4/content/docs/components/base/chart.mdx
@@ -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>
diff --git a/apps/v4/content/docs/components/radix/chart.mdx b/apps/v4/content/docs/components/radix/chart.mdx
index 71c135937f..84050ae481 100644
--- a/apps/v4/content/docs/components/radix/chart.mdx
+++ b/apps/v4/content/docs/components/radix/chart.mdx
@@ -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>