# V chart 11

> Stacked area chart with two revenue series and a Y-axis legend

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-chart-11).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-chart-11
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-chart-11-light-016d1c87f19dcda9.png
- Registry item: https://ui.cnippet.dev/r/v-chart-11.json
- Categories: chart
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-chart-11.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/chart`

## Files

### `registry/default/variants/v-chart-11.tsx`

```tsx
"use client";

import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/registry/default/ui/chart";

const chartData = [
  { month: "Jan", oneTime: 1800, recurring: 4200 },
  { month: "Feb", oneTime: 2100, recurring: 5100 },
  { month: "Mar", oneTime: 3200, recurring: 4800 },
  { month: "Apr", oneTime: 2600, recurring: 6200 },
  { month: "May", oneTime: 3100, recurring: 7100 },
  { month: "Jun", oneTime: 2900, recurring: 8400 },
];

const chartConfig = {
  oneTime: { color: "var(--chart-2)", label: "One-time" },
  recurring: { color: "var(--chart-1)", label: "Recurring" },
} satisfies ChartConfig;

export function Pattern() {
  return (
    <ChartContainer className="min-h-52 w-full" config={chartConfig}>
      <AreaChart
        accessibilityLayer
        data={chartData}
        margin={{ left: 8, right: 8 }}
      >
        <CartesianGrid vertical={false} />
        <XAxis
          axisLine={false}
          dataKey="month"
          tickLine={false}
          tickMargin={8}
        />
        <YAxis
          axisLine={false}
          tickFormatter={(v) => `$${(v / 1000).toFixed(0)}k`}
          tickLine={false}
          width={40}
        />
        <ChartTooltip content={<ChartTooltipContent />} cursor={false} />
        <ChartLegend content={<ChartLegendContent />} />
        <Area
          dataKey="oneTime"
          fill="var(--color-oneTime)"
          fillOpacity={0.3}
          stackId="a"
          stroke="var(--color-oneTime)"
          type="natural"
        />
        <Area
          dataKey="recurring"
          fill="var(--color-recurring)"
          fillOpacity={0.5}
          stackId="a"
          stroke="var(--color-recurring)"
          type="natural"
        />
      </AreaChart>
    </ChartContainer>
  );
}
```