Chart

1"use client"
2 
3import * as React from "react"
4import {
5  Area,
6  AreaChart,
7  Bar,
8  BarChart,
9  CartesianGrid,
10  Label,
11  Line,
12  LineChart,
13  Pie,
14  PieChart,
15  PolarAngleAxis,
16  PolarGrid,
17  PolarRadiusAxis,
18  Radar,
19  RadarChart,
20  RadialBar,
21  RadialBarChart,
22  XAxis,
23} from "recharts"
24 
25import {
26  Example,
27  ExampleWrapper,
28} from "@/registry/radix-sera/components/example"
29import {
30  Card,
31  CardContent,
32  CardDescription,
33  CardFooter,
34  CardHeader,
35  CardTitle,
36} from "@/registry/radix-sera/ui/card"
37import {
38  ChartContainer,
39  ChartTooltip,
40  ChartTooltipContent,
41  type ChartConfig,
42} from "@/registry/radix-sera/ui/chart"
43import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
44import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
45 
46const areaChartData = [
47  { month: "January", desktop: 186 },
48  { month: "February", desktop: 305 },
49  { month: "March", desktop: 237 },
50  { month: "April", desktop: 73 },
51  { month: "May", desktop: 209 },
52  { month: "June", desktop: 214 },
53]
54 
55const areaChartConfig = {
56  desktop: {
57    label: "Desktop",
58    color: "var(--chart-1)",
59  },
60} satisfies ChartConfig
61 
62export default function ChartExample() {
63  return (
64    <ExampleWrapper>
65      <ChartAreaExample />
66      <ChartBarExample />
67      <ChartLineExample />
68      <ChartPieExample />
69      <ChartRadialExample />
70      <ChartRadarExample />
71    </ExampleWrapper>
72  )
73}
74 
75function ChartAreaExample() {
76  return (
77    <Example title="Area Chart">
78      <Card className="w-full">
79        <CardHeader>
80          <CardTitle>Area Chart</CardTitle>
81          <CardDescription>
82            Showing total visitors for the last 6 months
83          </CardDescription>
84        </CardHeader>
85        <CardContent>
86          <ChartContainer config={areaChartConfig}>
87            <AreaChart
88              accessibilityLayer
89              data={areaChartData}
90              margin={{
91                left: 12,
92                right: 12,
93              }}
94            >
95              <CartesianGrid vertical={false} />
96              <XAxis
97                dataKey="month"
98                tickLine={false}
99                axisLine={false}
100                tickMargin={8}
101                tickFormatter={(value) => value.slice(0, 3)}
102              />
103              <ChartTooltip
104                cursor={false}
105                content={<ChartTooltipContent indicator="line" />}
106              />
107              <Area
108                dataKey="desktop"
109// … truncated