Skip to content

Commit 11bd246

Browse files
shadcnshadcn
committed
feat: recharts docs
1 parent 6a4b27b commit 11bd246

13 files changed

Lines changed: 47 additions & 33 deletions

File tree

‎apps/v4/content/docs/components/base/chart.mdx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@ base: base
55
component: true
66
---
77

8-
<Callout>
9-
10-
**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`.
11-
12-
</Callout>
13-
148
<ComponentPreview
159
styleName="base-nova"
1610
name="chart-demo"
@@ -24,6 +18,12 @@ Charts are designed to look great out of the box. They work well with the other
2418

2519
[Browse the Charts Library](/charts).
2620

21+
<Callout className="mt-4">
22+
23+
**Updated:** The `chart` component now uses Recharts v3. If you're upgrading existing chart code, see [Updating to Recharts v3](#updating-to-recharts-v3).
24+
25+
</Callout>
26+
2727
## Component
2828

2929
We use [Recharts](https://recharts.org/) under the hood.
@@ -51,6 +51,15 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
5151

5252
**The components are yours**.
5353

54+
## Updating to Recharts v3
55+
56+
If you're updating older chart code to Recharts v3:
57+
58+
- Use `var(--chart-1)` instead of `hsl(var(--chart-1))` when you reference chart tokens from your CSS variables.
59+
- Use `ChartTooltip.defaultIndex` for initial tooltip state only. Keep persistent active shapes in your own chart state.
60+
- Remove `layout` from `<Bar>` when the parent `<BarChart>` already defines it.
61+
- Keep a height, `min-h-*`, or `aspect-*` on `ChartContainer` so `ResponsiveContainer` can measure on first render.
62+
5463
## Installation
5564

5665
<CodeTabs>

‎apps/v4/content/docs/components/radix/chart.mdx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@ base: radix
55
component: true
66
---
77

8-
<Callout>
9-
10-
**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`.
11-
12-
</Callout>
13-
148
<ComponentPreview
159
styleName="radix-nova"
1610
name="chart-demo"
@@ -24,6 +18,12 @@ Charts are designed to look great out of the box. They work well with the other
2418

2519
[Browse the Charts Library](/charts).
2620

21+
<Callout className="mt-4">
22+
23+
**Updated:** The `chart` component now uses Recharts v3. If you're upgrading existing chart code, see [Updating to Recharts v3](#updating-to-recharts-v3).
24+
25+
</Callout>
26+
2727
## Component
2828

2929
We use [Recharts](https://recharts.org/) under the hood.
@@ -51,6 +51,15 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
5151

5252
**The components are yours**.
5353

54+
## Updating to Recharts v3
55+
56+
If you're updating older chart code to Recharts v3:
57+
58+
- Use `var(--chart-1)` instead of `hsl(var(--chart-1))` when you reference chart tokens from your CSS variables.
59+
- Use `ChartTooltip.defaultIndex` for initial tooltip state only. Keep persistent active shapes in your own chart state.
60+
- Remove `layout` from `<Bar>` when the parent `<BarChart>` already defines it.
61+
- Keep a height, `min-h-*`, or `aspect-*` on `ChartContainer` so `ResponsiveContainer` can measure on first render.
62+
5463
## Installation
5564

5665
<CodeTabs>

‎apps/v4/examples/base/chart-tooltip.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ function TooltipDemo({
173173
{!hideIndicator && (
174174
<div
175175
className={cn(
176-
"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
176+
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
177177
{
178178
"h-2.5 w-2.5": indicator === "dot",
179179
"w-1": indicator === "line",

‎apps/v4/examples/radix/chart-tooltip.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ function TooltipDemo({
173173
{!hideIndicator && (
174174
<div
175175
className={cn(
176-
"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
176+
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
177177
{
178178
"h-2.5 w-2.5": indicator === "dot",
179179
"w-1": indicator === "line",

‎apps/v4/public/r/styles/new-york-v4/chart-bar-active.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"files": [
99
{
1010
"path": "registry/new-york-v4/charts/chart-bar-active.tsx",
11-
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\nimport type { BarShapeProps } from \"recharts/types/cartesian/Bar\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with an active bar\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nconst ACTIVE_INDEX = 2\n\nexport function ChartBarActive() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Active</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"browser\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) =>\n chartConfig[value as keyof typeof chartConfig]?.label\n }\n />\n <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />\n <Bar\n dataKey=\"visitors\"\n strokeWidth={2}\n radius={8}\n shape={({ index, ...props }: BarShapeProps) =>\n index === ACTIVE_INDEX ? (\n <Rectangle\n {...props}\n fillOpacity={0.8}\n stroke={props.payload.fill}\n strokeDasharray={4}\n strokeDashoffset={4}\n />\n ) : (\n <Rectangle {...props} />\n )\n }\n />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 leading-none font-medium\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
11+
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\nimport type { BarShapeProps } from \"recharts/types/cartesian/Bar\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with an active bar\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nconst ACTIVE_INDEX = 2\n\nexport function ChartBarActive() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Active</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"browser\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) =>\n chartConfig[value as keyof typeof chartConfig]?.label\n }\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Bar\n dataKey=\"visitors\"\n strokeWidth={2}\n radius={8}\n shape={({ index, ...props }: BarShapeProps) =>\n index === ACTIVE_INDEX ? (\n <Rectangle\n {...props}\n fillOpacity={0.8}\n stroke={props.payload.fill}\n strokeDasharray={4}\n strokeDashoffset={4}\n />\n ) : (\n <Rectangle {...props} />\n )\n }\n />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 leading-none font-medium\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
1212
"type": "registry:block"
1313
}
1414
],

‎apps/v4/public/r/styles/new-york-v4/chart-pie-donut-active.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"files": [
99
{
1010
"path": "registry/new-york-v4/charts/chart-pie-donut-active.tsx",
11-
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport type { PieSectorShapeProps } from \"recharts/types/polar/Pie\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart with an active sector\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nconst ACTIVE_INDEX = 0\n\nexport function ChartPieDonutActive() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Donut Active</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />\n <Pie\n data={chartData}\n dataKey=\"visitors\"\n nameKey=\"browser\"\n innerRadius={60}\n strokeWidth={5}\n shape={({ index, outerRadius = 0, ...props }: PieSectorShapeProps) =>\n index === ACTIVE_INDEX ? (\n <Sector {...props} outerRadius={outerRadius + 10} />\n ) : (\n <Sector {...props} outerRadius={outerRadius} />\n )\n }\n />\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 leading-none font-medium\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
11+
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport type { PieSectorShapeProps } from \"recharts/types/polar/Pie\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart with an active sector\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nconst ACTIVE_INDEX = 0\n\nexport function ChartPieDonutActive() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Donut Active</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Pie\n data={chartData}\n dataKey=\"visitors\"\n nameKey=\"browser\"\n innerRadius={60}\n strokeWidth={5}\n shape={({\n index,\n outerRadius = 0,\n ...props\n }: PieSectorShapeProps) =>\n index === ACTIVE_INDEX ? (\n <Sector {...props} outerRadius={outerRadius + 10} />\n ) : (\n <Sector {...props} outerRadius={outerRadius} />\n )\n }\n />\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 leading-none font-medium\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
1212
"type": "registry:block"
1313
}
1414
],

0 commit comments

Comments
 (0)