chart-area-default.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart-area-default",
  "type": "registry:block",
  "author": "shadcn (https://ui.shadcn.com)",
  "registryDependencies": [
    "card",
    "chart"
  ],
  "files": [
    {
      "path": "charts/chart-area-default.tsx",
      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\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          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:block",
      "target": ""
    }
  ],
  "categories": [
    "charts",
    "charts-area"
  ]
}