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/bases/radix/components/example"
29import {
30  Card,
31  CardContent,
32  CardDescription,
33  CardFooter,
34  CardHeader,
35  CardTitle,
36} from "@/registry/bases/radix/ui/card"
37import {
38  ChartContainer,
39  ChartTooltip,
40  ChartTooltipContent,
41  type ChartConfig,
42} from "@/registry/bases/radix/ui/chart"
43import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
44 
45const areaChartData = [
46  { month: "January", desktop: 186 },
47  { month: "February", desktop: 305 },
48  { month: "March", desktop: 237 },
49  { month: "April", desktop: 73 },
50  { month: "May", desktop: 209 },
51  { month: "June", desktop: 214 },
52]
53 
54const areaChartConfig = {
55  desktop: {
56    label: "Desktop",
57    color: "var(--chart-1)",
58  },
59} satisfies ChartConfig
60 
61export default function ChartExample() {
62  return (
63    <ExampleWrapper>
64      <ChartAreaExample />
65      <ChartBarExample />
66      <ChartLineExample />
67      <ChartRadialExample />
68      <ChartRadarExample />
69    </ExampleWrapper>
70  )
71}
72 
73function ChartAreaExample() {
74  return (
75    <Example title="Area Chart">
76      <Card className="w-full">
77        <CardHeader>
78          <CardTitle>Area Chart</CardTitle>
79          <CardDescription>
80            Showing total visitors for the last 6 months
81          </CardDescription>
82        </CardHeader>
83        <CardContent>
84          <ChartContainer config={areaChartConfig}>
85            <AreaChart
86              accessibilityLayer
87              data={areaChartData}
88              margin={{
89                left: 12,
90                right: 12,
91              }}
92            >
93              <CartesianGrid vertical={false} />
94              <XAxis
95                dataKey="month"
96                tickLine={false}
97                axisLine={false}
98                tickMargin={8}
99                tickFormatter={(value) => value.slice(0, 3)}
100              />
101              <ChartTooltip
102                cursor={false}
103                content={<ChartTooltipContent indicator="line" />}
104              />
105              <Area
106                dataKey="desktop"
107                type="natural"
108                fill="var(--color-desktop)"
109                fillOpacity={0.4}
110// … truncated