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

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

# ChartConfig

**Type**: type

Configuration object for chart data series Defines labels, colors, and icons for chart data series with support for both static colors and theme-aware color definitions. Each series can have either a static color or theme-specific colors for light/dark modes. This configuration drives both visual styling and accessibility features throughout the chart ecosystem.

## Type Definition

```typescript
import { ChartConfig } from '@neynar/ui';

type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode;
    icon?: React.ComponentType;
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  );
}
```

## Examples

### Example 1
```tsx
// Static color configuration with icon
const chartConfig = {
  revenue: {
    label: "Revenue",
    color: "hsl(var(--chart-1))",
    icon: DollarSignIcon,
  },
} satisfies ChartConfig
```
### Example 2
```tsx
// Theme-aware color configuration for dark/light modes
const chartConfig = {
  users: {
    label: "Active Users",
    theme: {
      light: "#0ea5e9",
      dark: "#0284c7",
    },
  },
} satisfies ChartConfig
```
### Example 3
```tsx
// Complex configuration with multiple series
const chartConfig = {
  desktop: {
    label: "Desktop Users",
    color: "var(--chart-1)",
    icon: MonitorIcon,
  },
  mobile: {
    label: "Mobile Users",
    color: "var(--chart-2)",
    icon: SmartphoneIcon,
  },
  revenue: {
    label: "Revenue ($)",
    theme: {
      light: "#059669",
      dark: "#10b981",
    },
  },
} satisfies ChartConfig
```