# Experimental Charts (/charts/experimental-charts)





The existing chart components remain stable and continue to use Recharts. These
separately named components use the pre-release TanStack Charts package so you
can evaluate the new implementation without migrating production code.

<ComponentPreview name="experimental-charts-toggle-preskok-demo" description="Switch the same area chart between the stable Recharts and experimental TanStack implementations." />

## Installation [#installation]

Install only the experimental chart variant you want to evaluate:

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

## Area chart [#area-chart]

<ComponentPreview name="experimental-area-chart-preskok-demo" />

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

;<ExperimentalAreaChart
  config={config}
  data={data}
  dataKey="month"
  fillType="gradient"
  lineType="monotone"
/>
```

## Bar chart [#bar-chart]

<ComponentPreview name="experimental-bar-chart-preskok-demo" />

```bash
npx shadcn@latest add @preskok/experimental-bar-chart
```

## Line chart [#line-chart]

<ComponentPreview name="experimental-line-chart-preskok-demo" />

```bash
npx shadcn@latest add @preskok/experimental-line-chart
```

## Pie chart [#pie-chart]

<ComponentPreview name="experimental-pie-chart-preskok-demo" />

```bash
npx shadcn@latest add @preskok/experimental-pie-chart
```

## Stability [#stability]

TanStack Charts is still pre-release. Treat these components as opt-in and
expect their API to change. The unprefixed `AreaChart`, `BarChart`, `LineChart`,
and `PieChart` APIs are not changed by installing or testing them.