laif-ds/dist/agent-docs/components/Chart.md

Design System di Laif con componenti React basati su principi di Atomic Design

# Chart

## Overview

Design-system primitives around Recharts providing a container with theme-aware color variables, tooltip and legend content helpers.

---

## Exports

- `ChartContainer` — wraps `ResponsiveContainer` and provides CSS vars per series
- `ChartTooltip`, `ChartTooltipContent` — tooltip with indicator and label formatting
- `ChartLegend`, `ChartLegendContent` — legend component with icon/color support
- `ChartStyle` — internal style tag used by `ChartContainer`

---

## Types

```ts
export type ChartConfig = {
  [k: string]: {
    label?: React.ReactNode;
    icon?: React.ComponentType;
  } & ({ color?: string } | { theme: { light: string; dark: string } });
};
```

---

## Example

```tsx
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
} from "laif-ds";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from "recharts";

const data = [
  { month: "Jan", users: 400 },
  { month: "Feb", users: 800 },
  { month: "Mar", users: 650 },
];

const config = {
  users: { label: "Users", theme: { light: "#0ea5e9", dark: "#7dd3fc" } },
};

export function UsersChart() {
  return (
    <ChartContainer config={config} className="w-full">
      <LineChart data={data} margin={{ left: 12, right: 12 }}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip content={<ChartTooltipContent />} />
        <Legend content={<ChartLegendContent />} />
        <Line type="monotone" dataKey="users" stroke="var(--color-users)" />
      </LineChart>
    </ChartContainer>
  );
}
```