> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Charts

> Dashboard chart composition built on the UI chart container and Recharts.

**Location**: `sabo/src/components/dashboard/chart-area-interactive.tsx`

## When to use

* Visualize KPIs and time-series within dashboard sections.

## Usage

```tsx theme={null}
// Uses <ChartContainer> + Recharts
import { ChartContainer, type ChartConfig } from "@/components/ui/chart";
import { AreaChart, Area, XAxis, YAxis, Tooltip } from "recharts";

const config: ChartConfig = {
  revenue: { label: "Revenue", color: "hsl(142.1 76.2% 36.3%)" },
};
const data = [
  { d: "Mon", revenue: 1000 },
  { d: "Tue", revenue: 1200 },
  { d: "Wed", revenue: 800 },
];

export function RevenueChart() {
  return (
    <ChartContainer config={config} className="h-64">
      <AreaChart data={data}>
        <XAxis dataKey="d" />
        <YAxis />
        <Tooltip />
        <Area dataKey="revenue" stroke="var(--color-revenue)" fill="var(--color-revenue)" fillOpacity={0.15} />
      </AreaChart>
    </ChartContainer>
  );
}
```

## Styling tip

* Define series colors via `ChartContainer` config for light/dark theme parity.

## Key features

* **Theme-aware colors**: Define colors via `ChartConfig` for automatic light/dark mode support
* **Recharts integration**: Uses Recharts components (AreaChart, LineChart, BarChart) inside `ChartContainer`
* **Interactive**: Supports tooltips, legends, and click handlers
* **Responsive**: Container queries adjust sizing based on available space

## Steps

<Steps>
  <Step title="Create chart config">
    Define series with labels and colors. Colors can be simple strings or theme-specific objects:

    ```tsx theme={null}
    const config: ChartConfig = {
      revenue: { 
        label: "Revenue", 
        color: "hsl(142.1 76.2% 36.3%)" 
      },
      // Or theme-specific:
      users: {
        label: "Users",
        theme: {
          light: "hsl(221.2 83.2% 53.3%)",
          dark: "hsl(217.2 91.2% 59.8%)"
        }
      }
    };
    ```

    <Tip>
      Use CSS variables like `var(--color-revenue)` in Recharts components to reference these colors.
    </Tip>
  </Step>

  <Step title="Prepare data">
    Start with static arrays. Later, fetch from Supabase or your API. Ensure keys match `ChartConfig` series names.

    ```tsx theme={null}
    const data = [
      { date: "2024-01", revenue: 1000, users: 45 },
      { date: "2024-02", revenue: 1200, users: 52 },
    ];
    ```
  </Step>

  <Step title="Format axes and tooltips">
    Use Recharts' `tickFormatter` for axes and `Tooltip` content formatters:

    ```tsx theme={null}
    <XAxis 
      dataKey="date" 
      tickFormatter={(value) => new Date(value).toLocaleDateString('en-US', { month: 'short' })}
    />
    <YAxis 
      tickFormatter={(value) => new Intl.NumberFormat('en-US', { notation: 'compact' }).format(value)}
    />
    ```

    <Tip>
      Use `Intl.NumberFormat` and `Intl.DateTimeFormat` for locale-aware, accessible formatting.
    </Tip>
  </Step>

  <Step title="Add interactivity">
    Enable tooltips, legends, and click handlers for drill-down:

    ```tsx theme={null}
    <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dot" />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Area 
      onClick={(data) => console.log('Clicked:', data)}
    />
    ```
  </Step>
</Steps>

## Troubleshooting

* Colors not changing with theme
  * Ensure you're using `var(--color-{series})` in Recharts components
* Chart not responsive
  * Wrap in `ChartContainer` with `className` height/width
* Data not showing
  * Verify `dataKey` props match your data object keys exactly