Charts

1
"use client";
2
3
import {
4
  BarChart, Bar, LineChart, Line, PieChart, Pie, Sector,
5
  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
6
} from "recharts";
7
8
// Bar Chart — monthly revenue
9
const revenueData = [
10
  { month: "Jan", revenue: 4200 },
11
  { month: "Feb", revenue: 5800 },
12
  { month: "Mar", revenue: 4900 },
13
  { month: "Apr", revenue: 7200 },
14
  { month: "May", revenue: 6100 },
15
  { month: "Jun", revenue: 8400 },
16
];
17
18
<ResponsiveContainer width="100%" height={200}>
19
  <BarChart data={revenueData}>
20
    <CartesianGrid strokeDasharray="3 3" vertical={false} />
21
    <XAxis dataKey="month" />
22
    <YAxis tickFormatter={(v) => `$${v / 1000}k`} />
23
    <Tooltip cursor={false} formatter={(value) => [`$${value.toLocaleString()}`, "Revenue"]} />
24
    <Bar
25
      dataKey="revenue"
26
      style={{ cursor: "pointer" }}
27
      fill="var(--chart-1)"
28
      radius={[4, 4, 0, 0]}
29
      activeBar={false}
30
    />
31
  </BarChart>
32
</ResponsiveContainer>
33
34
// Line Chart — dual series
35
const trafficData = [
36
  { month: "Jan", users: 1200, sessions: 2400 },
37
  { month: "Feb", users: 1800, sessions: 3200 },
38
  { month: "Mar", users: 1500, sessions: 2800 },
39
  { month: "Apr", users: 2200, sessions: 4100 },
40
  { month: "May", users: 2800, sessions: 4600 },
41
  { month: "Jun", users: 3100, sessions: 5200 },
42
];
43
44
<ResponsiveContainer width="100%" height={200}>
45
  <LineChart data={trafficData}>
46
    <CartesianGrid strokeDasharray="3 3" vertical={false} />
47
    <XAxis dataKey="month" />
48
    <YAxis />
49
    <Tooltip />
50
    <Legend iconType="circle" />
51
    <Line
52
      type="monotone"
53
      dataKey="users"
54
      stroke="var(--chart-1)"
55
      strokeWidth={2}
56
      dot={{ r: 3, fill: "var(--chart-1)", style: { cursor: "pointer" } }}
57
      activeDot={{ r: 5, style: { cursor: "pointer" } }}
58
    />
59
    <Line
60
      type="monotone"
61
      dataKey="sessions"
62
      stroke="var(--chart-2)"
63
      strokeWidth={2}
64
      dot={{ r: 3, fill: "var(--chart-2)", style: { cursor: "pointer" } }}
65
      activeDot={{ r: 5, style: { cursor: "pointer" } }}
66
      strokeDasharray="4 4"
67
    />
68
  </LineChart>
69
</ResponsiveContainer>
70
71
// Donut Chart — a pie chart with a hollow center
72
// Heads up: recharts 3.x removed the <Cell> component. To color each slice, pass a
73
// `shape` render prop instead (it draws a <Sector> you can style per segment).
74
const deviceData = [
75
  { name: "Desktop", value: 58 },
76
  { name: "Mobile", value: 32 },
77
  { name: "Tablet", value: 10 },
78
];
79
const pieColors = ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)"];
80
81
<ResponsiveContainer width="100%" height={200}>
82
  <PieChart>
83
    <Pie
84
      data={deviceData}
85
      cx="50%"
86
      cy="50%"
87
      innerRadius={55}
88
      outerRadius={80}
89
      paddingAngle={3}
90
      dataKey="value"
91
      stroke="none"
92
      shape={(props) => (
93
        <Sector {...props} fill={pieColors[props.index] ?? "#8884d8"} style={{ cursor: "pointer" }} />
94
      )}
95
    />
96
    <Tooltip formatter={(value) => [`${value}%`, ""]} />
97
    <Legend iconType="circle" />
98
  </PieChart>
99
</ResponsiveContainer>