mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-29 15:44:22 +00:00
shadcn
GitHub
@@ -5,9 +5,9 @@ base: base
|
||||
component: true
|
||||
---
|
||||
|
||||
<Callout>
|
||||
<Callout className="mt-4">
|
||||
|
||||
**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`.
|
||||
**Updated:** The `chart` component now uses Recharts v3. If you're upgrading existing chart code, see [Updating to Recharts v3](#updating-to-recharts-v3).
|
||||
|
||||
</Callout>
|
||||
|
||||
@@ -51,6 +51,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 updating older chart code to Recharts v3:
|
||||
|
||||
- Use `var(--chart-1)` instead of `hsl(var(--chart-1))` when you reference chart tokens from your CSS variables.
|
||||
- Use `ChartTooltip.defaultIndex` for initial tooltip state only. Keep persistent active shapes in your own chart state.
|
||||
- Remove `layout` from `<Bar>` when the parent `<BarChart>` already defines it.
|
||||
- Keep a height, `min-h-*`, or `aspect-*` on `ChartContainer` so `ResponsiveContainer` can measure on first render.
|
||||
|
||||
## Installation
|
||||
|
||||
<CodeTabs>
|
||||
|
||||
@@ -5,9 +5,9 @@ base: radix
|
||||
component: true
|
||||
---
|
||||
|
||||
<Callout>
|
||||
<Callout className="mt-4">
|
||||
|
||||
**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`.
|
||||
**Updated:** The `chart` component now uses Recharts v3. If you're upgrading existing chart code, see [Updating to Recharts v3](#updating-to-recharts-v3).
|
||||
|
||||
</Callout>
|
||||
|
||||
@@ -51,6 +51,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 updating older chart code to Recharts v3:
|
||||
|
||||
- Use `var(--chart-1)` instead of `hsl(var(--chart-1))` when you reference chart tokens from your CSS variables.
|
||||
- Use `ChartTooltip.defaultIndex` for initial tooltip state only. Keep persistent active shapes in your own chart state.
|
||||
- Remove `layout` from `<Bar>` when the parent `<BarChart>` already defines it.
|
||||
- Keep a height, `min-h-*`, or `aspect-*` on `ChartContainer` so `ResponsiveContainer` can measure on first render.
|
||||
|
||||
## Installation
|
||||
|
||||
<CodeTabs>
|
||||
|
||||
@@ -173,7 +173,7 @@ function TooltipDemo({
|
||||
{!hideIndicator && (
|
||||
<div
|
||||
className={cn(
|
||||
"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
|
||||
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
|
||||
{
|
||||
"h-2.5 w-2.5": indicator === "dot",
|
||||
"w-1": indicator === "line",
|
||||
|
||||
@@ -173,7 +173,7 @@ function TooltipDemo({
|
||||
{!hideIndicator && (
|
||||
<div
|
||||
className={cn(
|
||||
"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
|
||||
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
|
||||
{
|
||||
"h-2.5 w-2.5": indicator === "dot",
|
||||
"w-1": indicator === "line",
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/new-york-v4/charts/chart-bar-active.tsx",
|
||||
"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",
|
||||
"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",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/new-york-v4/charts/chart-pie-donut-active.tsx",
|
||||
"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",
|
||||
"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",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -8,7 +8,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/new-york-v4/charts/chart-pie-label-custom.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\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 pie chart with a custom label\"\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\nexport function ChartPieLabelCustom() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Custom Label</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] px-0\"\n >\n <PieChart>\n <ChartTooltip\n content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n />\n <Pie\n data={chartData}\n dataKey=\"visitors\"\n labelLine={false}\n label={({ payload, ...props }) => {\n return (\n <text\n cx={props.cx}\n cy={props.cy}\n x={props.x}\n y={props.y}\n textAnchor={props.textAnchor}\n dominantBaseline={props.dominantBaseline}\n fill=\"hsla(var(--foreground))\"\n >\n {payload.visitors}\n </text>\n )\n }}\n nameKey=\"browser\"\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",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\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 pie chart with a custom label\"\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\nexport function ChartPieLabelCustom() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Custom Label</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] px-0\"\n >\n <PieChart>\n <ChartTooltip\n content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n />\n <Pie\n data={chartData}\n dataKey=\"visitors\"\n labelLine={false}\n label={({ payload, ...props }) => {\n return (\n <text\n cx={props.cx}\n cy={props.cy}\n x={props.x}\n y={props.y}\n textAnchor={props.textAnchor}\n dominantBaseline={props.dominantBaseline}\n fill=\"var(--foreground)\"\n >\n {payload.visitors}\n </text>\n )\n }}\n nameKey=\"browser\"\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",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/new-york-v4/charts/chart-radar-radius.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n PolarAngleAxis,\n PolarGrid,\n PolarRadiusAxis,\n Radar,\n RadarChart,\n} from \"recharts\"\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 radar chart with a radius axis\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarRadius() {\n return (\n <Card>\n <CardHeader className=\"items-center pb-4\">\n <CardTitle>Radar Chart - Radius Axis</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent className=\"pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadarChart data={chartData}>\n <ChartTooltip\n cursor={false}\n content={\n <ChartTooltipContent indicator=\"line\" labelKey=\"month\" />\n }\n />\n <PolarGrid />\n <Radar\n dataKey=\"desktop\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.6}\n />\n <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n <PolarRadiusAxis\n angle={60}\n stroke=\"hsla(var(--foreground))\"\n orientation=\"middle\"\n axisLine={false}\n />\n </RadarChart>\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=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n PolarAngleAxis,\n PolarGrid,\n PolarRadiusAxis,\n Radar,\n RadarChart,\n} from \"recharts\"\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 radar chart with a radius axis\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarRadius() {\n return (\n <Card>\n <CardHeader className=\"items-center pb-4\">\n <CardTitle>Radar Chart - Radius Axis</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent className=\"pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadarChart data={chartData}>\n <ChartTooltip\n cursor={false}\n content={\n <ChartTooltipContent indicator=\"line\" labelKey=\"month\" />\n }\n />\n <PolarGrid />\n <Radar\n dataKey=\"desktop\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.6}\n />\n <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n <PolarRadiusAxis\n angle={60}\n stroke=\"var(--foreground)\"\n orientation=\"middle\"\n axisLine={false}\n />\n </RadarChart>\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=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -83,7 +83,7 @@ export function ChartPieLabelCustom() {
|
||||
y={props.y}
|
||||
textAnchor={props.textAnchor}
|
||||
dominantBaseline={props.dominantBaseline}
|
||||
fill="hsla(var(--foreground))"
|
||||
fill="var(--foreground)"
|
||||
>
|
||||
{payload.visitors}
|
||||
</text>
|
||||
|
||||
@@ -76,7 +76,7 @@ export function ChartRadarRadius() {
|
||||
<Radar dataKey="mobile" fill="var(--color-mobile)" />
|
||||
<PolarRadiusAxis
|
||||
angle={60}
|
||||
stroke="hsla(var(--foreground))"
|
||||
stroke="var(--foreground)"
|
||||
orientation="middle"
|
||||
axisLine={false}
|
||||
/>
|
||||
|
||||
@@ -34,8 +34,8 @@ export default function Component() {
|
||||
<TooltipDemo
|
||||
label="Page Views"
|
||||
payload={[
|
||||
{ name: "Desktop", value: 186, fill: "hsl(var(--chart-1))" },
|
||||
{ name: "Mobile", value: 80, fill: "hsl(var(--chart-2))" },
|
||||
{ name: "Desktop", value: 186, fill: "var(--chart-1)" },
|
||||
{ name: "Mobile", value: 80, fill: "var(--chart-2)" },
|
||||
]}
|
||||
className="w-[8rem]"
|
||||
/>
|
||||
@@ -68,8 +68,8 @@ export default function Component() {
|
||||
label="Browser"
|
||||
hideLabel
|
||||
payload={[
|
||||
{ name: "Chrome", value: 1286, fill: "hsl(var(--chart-3))" },
|
||||
{ name: "Firefox", value: 1000, fill: "hsl(var(--chart-4))" },
|
||||
{ name: "Chrome", value: 1286, fill: "var(--chart-3)" },
|
||||
{ name: "Firefox", value: 1000, fill: "var(--chart-4)" },
|
||||
]}
|
||||
indicator="dashed"
|
||||
className="w-[8rem]"
|
||||
@@ -78,9 +78,7 @@ export default function Component() {
|
||||
<div className="hidden! md:flex!">
|
||||
<TooltipDemo
|
||||
label="Page Views"
|
||||
payload={[
|
||||
{ name: "Desktop", value: 12486, fill: "hsl(var(--chart-3))" },
|
||||
]}
|
||||
payload={[{ name: "Desktop", value: 12486, fill: "var(--chart-3)" }]}
|
||||
className="w-[9rem]"
|
||||
indicator="line"
|
||||
/>
|
||||
@@ -92,9 +90,7 @@ export default function Component() {
|
||||
<TooltipDemo
|
||||
label="Browser"
|
||||
hideLabel
|
||||
payload={[
|
||||
{ name: "Chrome", value: 1286, fill: "hsl(var(--chart-1))" },
|
||||
]}
|
||||
payload={[{ name: "Chrome", value: 1286, fill: "var(--chart-1)" }]}
|
||||
indicator="dot"
|
||||
className="w-[8rem]"
|
||||
/>
|
||||
@@ -177,7 +173,7 @@ function TooltipDemo({
|
||||
{!hideIndicator && (
|
||||
<div
|
||||
className={cn(
|
||||
"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
|
||||
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
|
||||
{
|
||||
"h-2.5 w-2.5": indicator === "dot",
|
||||
"w-1": indicator === "line",
|
||||
|
||||
Reference in New Issue
Block a user