chart-area-stacked-expand

1"use client"
2 
3import { TrendingUp } from "lucide-react"
4import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
5 
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardFooter,
11  CardHeader,
12  CardTitle,
13} from "@/registry/new-york/ui/card"
14import {
15  ChartConfig,
16  ChartContainer,
17  ChartTooltip,
18  ChartTooltipContent,
19} from "@/registry/new-york/ui/chart"
20const chartData = [
21  { month: "January", desktop: 186, mobile: 80, other: 45 },
22  { month: "February", desktop: 305, mobile: 200, other: 100 },
23  { month: "March", desktop: 237, mobile: 120, other: 150 },
24  { month: "April", desktop: 73, mobile: 190, other: 50 },
25  { month: "May", desktop: 209, mobile: 130, other: 100 },
26  { month: "June", desktop: 214, mobile: 140, other: 160 },
27]
28 
29const chartConfig = {
30  desktop: {
31    label: "Desktop",
32    color: "hsl(var(--chart-1))",
33  },
34  mobile: {
35    label: "Mobile",
36    color: "hsl(var(--chart-2))",
37  },
38  other: {
39    label: "Other",
40    color: "hsl(var(--chart-3))",
41  },
42} satisfies ChartConfig
43 
44export default function Component() {
45  return (
46    <Card>
47      <CardHeader>
48        <CardTitle>Area Chart - Stacked Expanded</CardTitle>
49        <CardDescription>
50          Showing total visitors for the last 6months
51        </CardDescription>
52      </CardHeader>
53      <CardContent>
54        <ChartContainer config={chartConfig}>
55          <AreaChart
56            accessibilityLayer
57            data={chartData}
58            margin={{
59              left: 12,
60              right: 12,
61              top: 12,
62            }}
63            stackOffset="expand"
64          >
65            <CartesianGrid vertical={false} />
66            <XAxis
67              dataKey="month"
68              tickLine={false}
69              axisLine={false}
70              tickMargin={8}
71              tickFormatter={(value) => value.slice(0, 3)}
72            />
73            <ChartTooltip
74              cursor={false}
75              content={<ChartTooltipContent indicator="line" />}
76            />
77            <Area
78              dataKey="other"
79              type="natural"
80              fill="var(--color-other)"
81              fillOpacity={0.1}
82              stroke="var(--color-other)"
83              stackId="a"
84            />
85            <Area
86              dataKey="mobile"
87              type="natural"
88              fill="var(--color-mobile)"
89              fillOpacity={0.4}
90              stroke="var(--color-mobile)"
91              stackId="a"
92            />
93            <Area
94// … truncated