# Area Chart (/charts/area-chart)





<ComponentPreview name="area-chart-preskok-demo" description="A basic area chart with two series." />

## Installation [#installation]

```bash
npx shadcn@latest add @preskok/area-chart
```

## Usage [#usage]

```tsx
import { AreaChart } from "@/components/ui/preskok-ui/area-chart"

const chartData = [
  { month: "January", Desktop: 186, Mobile: 80 },
  { month: "February", Desktop: 305, Mobile: 200 },
  { month: "March", Desktop: 237, Mobile: 120 },
]

const chartConfig = {
  Desktop: { label: "Desktop", color: "#2563eb" },
  Mobile: { label: "Mobile", color: "#60a5fa" },
}

export function AreaChartDemo() {
  return <AreaChart data={chartData} dataKey="month" config={chartConfig} />
}
```

## Features [#features]

* **Multiple types**: default, stacked, percent
* **Legend + tooltip**: configurable and accessible
* **Custom colors**: per-series theme or custom hex
* **Responsive**: fits parent container