> ## 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.

# Chart

> Theme-aware chart container and tooltip utilities built on Recharts.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/LH5aXxXQjZcsU-Hh/images/ui/chart-light.png?fit=max&auto=format&n=LH5aXxXQjZcsU-Hh&q=85&s=ac49c45062431854ba964b465fff942c" alt="Chart component preview (light)" width="600" data-path="images/ui/chart-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/chart.tsx`

## When to use

* Render charts with consistent theming and shared tooltip patterns.
* Use for data visualization that needs to respect light/dark mode.

## Usage

```tsx theme={null}
import { ChartContainer, type ChartConfig } from "@/components/ui/chart";
import { LineChart, Line, XAxis, YAxis } from "recharts";

const config: ChartConfig = {
  users: { label: "Users", color: "hsl(221.2 83.2% 53.3%)" },
};

export function Example() {
  return (
    <ChartContainer config={config} className="h-64">
      <LineChart data={[{ d: "Mon", users: 10 }, { d: "Tue", users: 20 }]}>
        <XAxis dataKey="d" />
        <YAxis />
        <Line dataKey="users" stroke="var(--color-users)" />
      </LineChart>
    </ChartContainer>
  );
}
```

## Key props

<ParamField path="ChartContainer.config" type="Record<string, { label?: ReactNode; color?: string } | { label?: ReactNode; theme: Record<'light'|'dark', string> }>">
  Series config. Injects CSS variables like `--color-{key}` for use by chart primitives.
</ParamField>

## Key parts

<ParamField path="ChartTooltip/ChartTooltipContent">
  Reusable tooltip wrapper and customizable tooltip content renderer.
</ParamField>

<ParamField path="ChartLegend/ChartLegendContent">
  Legend wrapper and customizable legend content renderer.
</ParamField>

## Styling tip

Define series colors in `config` for automatic light/dark mode support.

```tsx theme={null}
const config: ChartConfig = {
  users: { label: "Users", color: "hsl(221.2 83.2% 53.3%)" },
};
// Use var(--color-users) in chart components
```

## Accessibility

* Provide descriptive labels in `ChartConfig` for screen reader context.
* Use sufficient color contrast and consider patterns/markers for color-blind users.
* Include a summary or data table alternative for complex charts.