Chart Examples

1import {
2  Bar,
3  BarChart,
4  CartesianGrid,
5  Line,
6  LineChart,
7  Pie,
8  PieChart,
9  Scatter,
10  ScatterChart,
11  XAxis,
12  YAxis,
13} from "recharts"
14 
15import {
16  ChartContainer,
17  ChartTooltip,
18  ChartTooltipContent,
19  type ChartConfig,
20} from "@/components/ui/chart"
21 
22const performanceData = [
23  { month: "Jan", revenue: 186, expenses: 82 },
24  { month: "Feb", revenue: 305, expenses: 148 },
25  { month: "Mar", revenue: 237, expenses: 120 },
26  { month: "Apr", revenue: 273, expenses: 154 },
27  { month: "May", revenue: 209, expenses: 103 },
28  { month: "Jun", revenue: 314, expenses: 165 },
29]
30 
31const performanceConfig = {
32  revenue: { label: "Revenue", color: "var(--chart-1)" },
33  expenses: { label: "Expenses", color: "var(--chart-3)" },
34} satisfies ChartConfig
35 
36const channelData = [
37  { channel: "Organic", visitors: 420, fill: "var(--chart-1)" },
38  { channel: "Referral", visitors: 280, fill: "var(--chart-2)" },
39  { channel: "Social", visitors: 190, fill: "var(--chart-3)" },
40  { channel: "Email", visitors: 150, fill: "var(--chart-4)" },
41]
42 
43const channelConfig = {
44  visitors: { label: "Visitors" },
45  organic: { label: "Organic", color: "var(--chart-1)" },
46  referral: { label: "Referral", color: "var(--chart-2)" },
47  social: { label: "Social", color: "var(--chart-3)" },
48  email: { label: "Email", color: "var(--chart-4)" },
49} satisfies ChartConfig
50 
51const pointData = [
52  { day: 1, score: 38 },
53  { day: 2, score: 52 },
54  { day: 3, score: 44 },
55  { day: 4, score: 68 },
56  { day: 5, score: 61 },
57  { day: 6, score: 79 },
58  { day: 7, score: 74 },
59  { day: 8, score: 91 },
60  { day: 9, score: 83 },
61]
62 
63const pointConfig = {
64  score: { label: "Focus score", color: "var(--chart-5)" },
65} satisfies ChartConfig
66 
67const candleData = [
68  { day: "Mon", range: [92, 108], direction: "up" },
69  { day: "Tue", range: [101, 95], direction: "down" },
70  { day: "Wed", range: [98, 116], direction: "up" },
71  { day: "Thu", range: [118, 111], direction: "down" },
72  { day: "Fri", range: [110, 123], direction: "up" },
73  { day: "Sat", range: [121, 128], direction: "up" },
74  { day: "Sun", range: [126, 119], direction: "down" },
75]
76 
77const candleConfig = {
78  range: { label: "Price" },
79} satisfies ChartConfig
80 
81export function BarChartExample() {
82  return (
83    <ChartContainer config={performanceConfig} className="h-64 w-full max-w-2xl">
84      <BarChart accessibilityLayer data={performanceData} margin={{ left: 4, right: 4 }}>
85        <CartesianGrid vertical={false} />
86// … truncated