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/base-vega/components/example"
29import {
30  Card,
31  CardContent,
32  CardDescription,
33  CardFooter,
34  CardHeader,
35  CardTitle,
36} from "@/registry/base-vega/ui/card"
37import {
38  ChartContainer,
39  ChartTooltip,
40  ChartTooltipContent,
41  type ChartConfig,
42} from "@/registry/base-vega/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      <ChartPieExample />
68      <ChartRadialExample />
69      <ChartRadarExample />
70    </ExampleWrapper>
71  )
72}
73 
74function ChartAreaExample() {
75  return (
76    <Example title="Area Chart">
77      <Card className="w-full">
78        <CardHeader>
79          <CardTitle>Area Chart</CardTitle>
80          <CardDescription>
81            Showing total visitors for the last 6 months
82          </CardDescription>
83        </CardHeader>
84        <CardContent>
85          <ChartContainer config={areaChartConfig}>
86            <AreaChart
87              accessibilityLayer
88              data={areaChartData}
89              margin={{
90                left: 12,
91                right: 12,
92              }}
93            >
94              <CartesianGrid vertical={false} />
95              <XAxis
96                dataKey="month"
97                tickLine={false}
98                axisLine={false}
99                tickMargin={8}
100                tickFormatter={(value) => value.slice(0, 3)}
101              />
102              <ChartTooltip
103                cursor={false}
104                content={<ChartTooltipContent indicator="line" />}
105              />
106              <Area
107                dataKey="desktop"
108                type="natural"
109                fill="var(--color-desktop)"
110// … truncated