[V0_FILE]typescriptreact:file="components/chart-area.tsx" 'use client' import { TrendingUp } from 'lucide-react' import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts' import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '@/components/ui/card' import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, } from '@/components/ui/chart' const chartData = [ { month: 'January', desktop: 186, mobile: 80 }, { month: 'February', desktop: 305, mobile: 200 }, { month: 'March', desktop: 237, mobile: 120 }, { month: 'April', desktop: 73, mobile: 190 }, { month: 'May', desktop: 209, mobile: 130 }, { month: 'June', desktop: 214, mobile: 140 }, ] const chartConfig = { desktop: { label: 'Desktop', color: 'hsl(var(--chart-1))', }, mobile: { label: 'Mobile', color: 'hsl(var(--chart-2))', }, } satisfies ChartConfig export function ChartArea() { return ( Area Chart - Stacked Showing total visitors for the last 6 months value.slice(0, 3)} /> } />

Trending up by 5.2% this month

January - June 2024

) } [V0_FILE]typescriptreact:file="components/chart-bar.tsx" 'use client' import { TrendingUp } from 'lucide-react' import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts' import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '@/components/ui/card' import { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from '@/components/ui/chart' const chartData = [ { month: 'January', desktop: 186, mobile: 80 }, { month: 'February', desktop: 305, mobile: 200 }, { month: 'March', desktop: 237, mobile: 120 }, { month: 'April', desktop: 73, mobile: 190 }, { month: 'May', desktop: 209, mobile: 130 }, { month: 'June', desktop: 214, mobile: 140 }, ] const chartConfig = { desktop: { label: 'Desktop', color: 'hsl(var(--chart-1))', }, mobile: { label: 'Mobile', color: 'hsl(var(--chart-2))', }, } satisfies ChartConfig export function ChartBar() { return ( Bar Chart - Stacked + Legend January - June 2024 value.slice(0, 3)} /> } /> } />

Trending up by 5.2% this month

Showing total visitors for the last 6 months

) } [V0_FILE]typescriptreact:file="components/chart-pie.tsx" 'use client' import * as React from 'react' import { TrendingUp } from 'lucide-react' import { Label, Pie, PieChart } from 'recharts' import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '@/components/ui/card' import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, } from '@/components/ui/chart' const chartData = [ { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' }, { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' }, { browser: 'firefox', visitors: 287, fill: 'var(--color-firefox)' }, { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' }, { browser: 'other', visitors: 190, fill: 'var(--color-other)' }, ] const chartConfig = { visitors: { label: 'Visitors', }, chrome: { label: 'Chrome', color: 'hsl(var(--chart-1))', }, safari: { label: 'Safari', color: 'hsl(var(--chart-2))', }, firefox: { label: 'Firefox', color: 'hsl(var(--chart-3))', }, edge: { label: 'Edge', color: 'hsl(var(--chart-4))', }, other: { label: 'Other', color: 'hsl(var(--chart-5))', }, } satisfies ChartConfig export function ChartPie() { const totalVisitors = React.useMemo(() => { return chartData.reduce((acc, curr) => acc + curr.visitors, 0) }, []) return ( Pie Chart - Donut with Text January - June 2024 } /> { if (viewBox && 'cx' in viewBox && 'cy' in viewBox) { return ( {totalVisitors.toLocaleString()} Visitors ) } }} />

Trending up by 5.2% this month

Showing total visitors for the last 6 months

) } [V0_FILE]typescriptreact:file="components/chart-line.tsx" 'use client' import { TrendingUp } from 'lucide-react' import { CartesianGrid, Line, LineChart, XAxis } from 'recharts' import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '@/components/ui/card' import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, } from '@/components/ui/chart' const chartData = [ { month: 'January', desktop: 186, mobile: 80 }, { month: 'February', desktop: 305, mobile: 200 }, { month: 'March', desktop: 237, mobile: 120 }, { month: 'April', desktop: 73, mobile: 190 }, { month: 'May', desktop: 209, mobile: 130 }, { month: 'June', desktop: 214, mobile: 140 }, ] const chartConfig = { desktop: { label: 'Desktop', color: 'hsl(var(--chart-1))', }, mobile: { label: 'Mobile', color: 'hsl(var(--chart-2))', }, } satisfies ChartConfig export function ChartLine() { return ( Line Chart - Multiple January - June 2024 value.slice(0, 3)} /> } />

Trending up by 5.2% this month

Showing total visitors for the last 6 months

) } [V0_FILE]typescriptreact:file="app/page.tsx" entry="true" import { ChartArea } from '@/components/chart-area' import { ChartBar } from '@/components/chart-bar' import { ChartLine } from '@/components/chart-line' import { ChartPie } from '@/components/chart-pie' export default function Page() { return (

) } [V0_FILE]typescriptreact:file="app/layout.tsx" entry="true" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' const geistSans = Geist({ subsets: ['latin'], variable: '--font-sans', }) const geistMono = Geist_Mono({ subsets: ['latin'], variable: '--font-mono', }) export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) }