Chart

1'use client'
2import { Monitor, Phone } from 'lucide-react'
3import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts'
4
5import {
6    ChartConfig,
7    ChartContainer,
8    ChartLegend,
9    ChartLegendContent,
10    ChartTooltip,
11    ChartTooltipContent,
12} from '@/components/ui/chart'
13
14const chartData = [
15    { month: 'January', desktop: 186, mobile: 80 },
16    { month: 'February', desktop: 305, mobile: 200 },
17    { month: 'March', desktop: 237, mobile: 120 },
18    { month: 'April', desktop: 73, mobile: 190 },
19    { month: 'May', desktop: 209, mobile: 130 },
20    { month: 'June', desktop: 214, mobile: 140 },
21]
22
23const chartConfig = {
24    desktop: {
25        label: 'Desktop',
26        icon: Monitor,
27        color: '#111827',
28    },
29    mobile: {
30        label: 'Mobile',
31        icon: Phone,
32        color: '#6b7280',
33    },
34} satisfies ChartConfig
35
36export function ChartDemo() {
37    return (
38        <ChartContainer
39            config={chartConfig}
40            className="h-[260px] w-full sm:h-[300px]"
41        >
42            <BarChart accessibilityLayer data={chartData}>
43                <CartesianGrid />
44                <XAxis
45                    dataKey="month"
46                    tickLine={false}
47                    tickMargin={10}
48                    axisLine={false}
49                    tick={{ fontSize: 12 }}
50                    tickFormatter={(value) => value.slice(0, 3)}
51                />
52                <YAxis
53                    tickLine={false}
54                    axisLine={false}
55                    width={35}
56                    tick={{ fontSize: 12 }}
57                />
58                <ChartTooltip content={<ChartTooltipContent />} />
59                <ChartLegend content={<ChartLegendContent />} />
60                <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
61                <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
62            </BarChart>
63        </ChartContainer>
64    )
65}
66

1'use client'
2
3import { CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts'
4
5import {
6    ChartConfig,
7    ChartContainer,
8    ChartTooltip,
9    ChartTooltipContent,
10} from '@/components/ui/chart'
11
12const data = [
13    { month: 'Jan', sales: 2400 },
14    { month: 'Feb', sales: 1398 },
15    { month: 'Mar', sales: 9800 },
16]
17
18const chartConfig = {
19    sales: {
20        label: 'Sales',
21        color: '#2563eb',
22    },
23} satisfies ChartConfig
24
25export function ChartLine() {
26    return (
27        <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
28            <LineChart data={data}>
29                <CartesianGrid strokeDasharray="3 3" />
30                <XAxis dataKey="month" />
31                <YAxis />
32                <ChartTooltip content={<ChartTooltipContent />} />
33                <Line
34                    dataKey="sales"
35                    stroke="var(--color-sales)"
36                    strokeWidth={2}
37                />
38            </LineChart>
39        </ChartContainer>
40    )
41}
42

1'use client'
2
3import { Cell, Pie, PieChart } from 'recharts'
4
5import {
6    ChartContainer,
7    ChartTooltip,
8    ChartTooltipContent,
9} from '@/components/ui/chart'
10
11const data = [
12    { name: 'Paid', value: 280 },
13    { name: 'Pending', value: 180 },
14    { name: 'Overdue', value: 90 },
15    { name: 'Cancelled', value: 90 },
16]
17
18export function PaymentStatusPieChart() {
19    return (
20        <ChartContainer
21            config={{
22                Paid: { label: 'Paid', color: '#16a34a' },
23                Pending: { label: 'Pending', color: '#d97706' },
24                Overdue: { label: 'Overdue', color: '#dc2626' },
25                Cancelled: { label: 'Cancelled', color: '#475569' },
26            }}
27            className="h-[240px] lg:w-full"
28        >
29            <PieChart>
30                <ChartTooltip content={<ChartTooltipContent />} />
31                <Pie
32                    data={data}
33                    dataKey="value"
34                    nameKey="name"
35                    innerRadius={60}
36                    outerRadius={90}
37                >
38                    {data.map((entry) => (
39                        <Cell
40                            key={entry.name}
41                            fill={`var(--color-${entry.name})`}
42                        />
43                    ))}
44                </Pie>
45            </PieChart>
46        </ChartContainer>
47    )
48}
49

1'use client'
2
3import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
4
5import {
6    ChartContainer,
7    ChartTooltip,
8    ChartTooltipContent,
9} from '@/components/ui/chart'
10
11const data = [
12    { month: 'Jan', value: 120 },
13    { month: 'Feb', value: 210 },
14    { month: 'Mar', value: 180 },
15    { month: 'Apr', value: 260 },
16]
17
18export function AreaChartExample() {
19    return (
20        <ChartContainer
21            config={{
22                value: { label: 'Revenue', color: '#2563eb' },
23            }}
24            className="h-[250px]"
25        >
26            <AreaChart data={data}>
27                <CartesianGrid vertical={false} />
28                <XAxis dataKey="month" />
29                <ChartTooltip content={<ChartTooltipContent />} />
30                <Area
31                    dataKey="value"
32                    stroke="var(--color-value)"
33                    fill="var(--color-value)"
34                    fillOpacity={0.15}
35                />
36            </AreaChart>
37        </ChartContainer>
38    )
39}
40

1'use client'
2
3import { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis } from 'recharts'
4
5import {
6    ChartContainer,
7    ChartLegend,
8    ChartLegendContent,
9    ChartTooltip,
10    ChartTooltipContent,
11} from '@/components/ui/chart'
12
13const dataA = [
14    { x: 100, y: 200 },
15    { x: 120, y: 100 },
16    { x: 170, y: 300 },
17    { x: 140, y: 250 },
18    { x: 150, y: 400 },
19]
20
21const dataB = [
22    { x: 80, y: 150 },
23    { x: 100, y: 90 },
24    { x: 140, y: 280 },
25    { x: 120, y: 230 },
26    { x: 130, y: 360 },
27]
28
29const xTicks = [80, 100, 120, 130, 140, 150, 170]
30
31const chartConfig = {
32    seriesA: {
33        label: 'Series A',
34        theme: {
35            light: '#2563eb',
36            dark: '#60a5fa',
37        },
38    },
39    seriesB: {
40        label: 'Series B',
41        theme: {
42            light: '#16a34a',
43            dark: '#4ade80',
44        },
45    },
46}
47
48export function ChartScatterExample() {
49    return (
50        <ChartContainer config={chartConfig} className="min-h-[300px] w-full">
51            <ScatterChart>
52                <CartesianGrid />
53                <XAxis
54                    type="number"
55                    dataKey="x"
56                    ticks={xTicks}
57                    domain={[80, 170]}
58                />
59                <YAxis type="number" dataKey="y" />
60                <ChartTooltip content={<ChartTooltipContent />} />
61                <ChartLegend content={<ChartLegendContent />} />
62                <Scatter
63                    name="seriesA"
64                    data={dataA}
65                    fill="var(--color-seriesA)"
66                />
67                <Scatter
68                    name="seriesB"
69                    data={dataB}
70                    fill="var(--color-seriesB)"
71                />
72            </ScatterChart>
73        </ChartContainer>
74    )
75}
76

1'use client'
2
3import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
4
5import {
6    ChartContainer,
7    ChartTooltip,
8    ChartTooltipContent,
9} from '@/components/ui/chart'
10
11export function RadarChartExample() {
12    return (
13        <ChartContainer
14            config={{
15                score: { label: 'Score', color: '#2563eb' },
16            }}
17            className="h-[300px]"
18        >
19            <RadarChart
20                data={[
21                    { metric: 'Payment', score: 120 },
22                    { metric: 'Risk', score: 90 },
23                    { metric: 'History', score: 100 },
24                ]}
25            >
26                <PolarGrid />
27                <PolarAngleAxis dataKey="metric" />
28                <ChartTooltip content={<ChartTooltipContent />} />
29                <Radar
30                    dataKey="score"
31                    stroke="var(--color-score)"
32                    fill="var(--color-score)"
33                    fillOpacity={0.2}
34                />
35            </RadarChart>
36        </ChartContainer>
37    )
38}
39

1'use client'
2
3import React from 'react'
4import { Funnel, FunnelChart, LabelList, Tooltip } from 'recharts'
5
6import { ChartConfig, ChartContainer } from '@/components/ui/chart'
7
8const chartData = [
9    { name: 'January', value: 360 },
10    { name: 'February', value: 260 },
11    { name: 'March', value: 205 },
12    { name: 'April', value: 165 },
13    { name: 'May', value: 125 },
14    { name: 'June', value: 90 },
15]
16
17const chartConfig = {
18    value: {
19        label: 'Users',
20        color: '#60a5fa',
21    },
22} satisfies ChartConfig
23
24export function FunnelChartExample() {
25    return (
26        <ChartContainer config={chartConfig} className="h-[300px] w-full">
27            <FunnelChart>
28                <Tooltip />
29
30                <Funnel
31                    data={chartData}
32                    dataKey="value"
33                    isAnimationActive
34                    fill="#60a5fa"
35                >
36                    <LabelList
37                        dataKey="name"
38                        position="inside"
39                        fill="#111827"
40                    />
41                </Funnel>
42            </FunnelChart>
43        </ChartContainer>
44    )
45}
46