Chart

1'use client'
2
3import { Bar, BarChart } from 'recharts'
4
5import { ChartConfig, ChartContainer } from '@/components/ui/chart'
6
7const chartData = [
8    { month: 'January', desktop: 186, mobile: 80 },
9    { month: 'February', desktop: 305, mobile: 200 },
10    { month: 'March', desktop: 237, mobile: 120 },
11    { month: 'April', desktop: 73, mobile: 190 },
12    { month: 'May', desktop: 209, mobile: 130 },
13    { month: 'June', desktop: 214, mobile: 140 },
14]
15
16const chartConfig = {
17    desktop: {
18        label: 'Desktop',
19        color: '#2563eb',
20    },
21    mobile: {
22        label: 'Mobile',
23        color: '#60a5fa',
24    },
25} satisfies ChartConfig
26
27export function Component() {
28    return (
29        <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
30            <BarChart accessibilityLayer data={chartData}>
31                <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
32                <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
33            </BarChart>
34        </ChartContainer>
35    )
36}
37