<!-- source-hash: 4316bb882549d86dc2d68491a7d84326 -->
A comprehensive chart component system built on Recharts that provides themed, accessible data visualization components with customizable styling and tooltips.

## Key Components

**Core Components:**
- `ChartContainer` - Main wrapper that provides chart context and responsive container
- `ChartTooltip` / `ChartTooltipContent` - Customizable tooltip with indicators and formatting
- `ChartLegend` / `ChartLegendContent` - Legend component with icons and labels
- `ChartStyle` - Dynamic CSS generator for theme-aware chart colors

**Types & Context:**
- `ChartConfig` - Configuration object defining chart data series with labels, icons, and theme colors
- `useChart()` - React hook to access chart configuration context
- `getPayloadConfigFromPayload()` - Helper to extract configuration from chart data payloads

**Theme System:**
- Supports light/dark themes with CSS custom properties
- Dynamic color injection based on chart configuration
- Comprehensive Recharts styling overrides for consistent appearance

## Usage Example

```typescript
import { ChartContainer, ChartTooltipContent, ChartTooltip } from "./chart"
import { BarChart, Bar, XAxis, YAxis } from "recharts"

const chartConfig = {
  sales: {
    label: "Sales",
    color: "#8884d8",
    theme: { light: "#8884d8", dark: "#82ca9d" }
  },
  revenue: {
    label: "Revenue", 
    color: "#82ca9d"
  }
}

const data = [
  { month: "Jan", sales: 4000, revenue: 2400 },
  { month: "Feb", sales: 3000, revenue: 1398 }
]

function SalesChart() {
  return (
    <ChartContainer config={chartConfig} className="h-[400px]">
      <BarChart data={data}>
        <XAxis dataKey="month" />
        <YAxis />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="sales" fill="var(--color-sales)" />
        <Bar dataKey="revenue" fill="var(--color-revenue)" />
      </BarChart>
    </ChartContainer>
  )
}
```