chart-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart-example",
  "title": "Chart",
  "registryDependencies": [
    "chart",
    "card",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-maia/examples/chart-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-maia/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\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 areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\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={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\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\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\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 barChartConfig = {\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\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\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 lineChartConfig = {\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\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\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 cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\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\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\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={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\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 radarChartConfig = {\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\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</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={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\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            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}