# Chart (helpers) (/charts/chart)





<ComponentPreview name="chart-preskok-demo" description="Using the core Chart helpers directly with Recharts primitives." />

## Installation [#installation]

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

## Usage [#usage]

```tsx
import { Area, AreaChart as AreaChartPrimitive } from "recharts"

import {
  CartesianGrid,
  Chart,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
  XAxis,
  YAxis,
} from "@/components/ui/preskok-ui/chart"

const data = [
  { day: "Mon", Desktop: 120, Mobile: 80 },
  { day: "Tue", Desktop: 200, Mobile: 130 },
]

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

export function ChartDemo() {
  return (
    <Chart data={data} dataKey="day" config={config}>
      {() => (
        <AreaChartPrimitive data={data}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis />
          <YAxis />
          <ChartLegend content={<ChartLegendContent />} />
          <ChartTooltip content={<ChartTooltipContent />} />
          <Area
            type="monotone"
            dataKey="Desktop"
            stroke="#2563eb"
            fill="#2563eb"
            fillOpacity={0.3}
          />
          <Area
            type="monotone"
            dataKey="Mobile"
            stroke="#60a5fa"
            fill="#60a5fa"
            fillOpacity={0.3}
          />
        </AreaChartPrimitive>
      )}
    </Chart>
  )
}
```

## Features [#features]

* **Context** for shared chart props and selection state
* **Legend** with selection filtering
* **Tooltip** with configurable content
* **Axes** helpers with sensible defaults