@neynar/ui/llm-docs/chart-container.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# ChartContainer

**Type**: component

Container component for Recharts charts with theming and configuration The ChartContainer provides a responsive wrapper for Recharts components with automatic theming, color management, and configuration. It generates CSS custom properties for chart colors, handles dark mode support, and applies consistent styling across all chart types. Built on the shadcn/ui design system with Recharts as the underlying charting library.

## JSX Usage

```jsx
import { ChartContainer } from '@neynar/ui';

<ChartContainer
  config={value}
  id="value"
  className="value"
  style={value}
  "aria-label"="value"
  "aria-describedby"="value"
>
  {/* Your content here */}
</ChartContainer>
```

## Component Props

### config
- **Type**: `ChartConfig`
- **Required**: Yes
- **Description**: No description available

### children
- **Type**: `React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >["children"]`
- **Required**: Yes
- **Description**: No description available

### id
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### style
- **Type**: `React.CSSProperties`
- **Required**: No
- **Description**: No description available

### "aria-label"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### "aria-describedby"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic line chart with accessibility and tooltips
const chartData = [
  { month: "Jan", revenue: 2000, profit: 400 },
  { month: "Feb", revenue: 2400, profit: 600 },
  { month: "Mar", revenue: 3200, profit: 900 },
]
const chartConfig = {
  revenue: {
    label: "Revenue",
    color: "hsl(var(--chart-1))",
  },
  profit: {
    label: "Profit",
    color: "hsl(var(--chart-2))",
  },
} satisfies ChartConfig
<ChartContainer config={chartConfig} className="min-h-[300px]">
  <LineChart data={chartData} accessibilityLayer>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="month" />
    <YAxis />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Line
      type="monotone"
      dataKey="revenue"
      stroke="var(--color-revenue)"
      strokeWidth={2}
    />
    <Line
      type="monotone"
      dataKey="profit"
      stroke="var(--color-profit)"
      strokeWidth={2}
    />
  </LineChart>
</ChartContainer>
```
### Example 2
```tsx
// Bar chart with theme-aware colors and custom formatting
<ChartContainer
  config={{
    sales: {
      label: "Sales",
      theme: {
        light: "#0ea5e9",
        dark: "#0284c7",
      },
    },
  }}
  className="h-[400px]"
>
  <BarChart data={data} accessibilityLayer>
    <XAxis dataKey="month" />
    <YAxis tickFormatter={(value) => `$${value.toLocaleString()}`} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="sales" fill="var(--color-sales)" radius={4} />
  </BarChart>
</ChartContainer>
```
### Example 3
```tsx
// Pie chart with legend and icons for device breakdown
<ChartContainer config={{
  desktop: {
    label: "Desktop",
    color: "var(--chart-1)",
    icon: MonitorIcon,
  },
  mobile: {
    label: "Mobile",
    color: "var(--chart-2)",
    icon: SmartphoneIcon,
  },
}}>
  <PieChart>
    <Pie data={data} dataKey="value" nameKey="device" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
  </PieChart>
</ChartContainer>
```