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

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

# ChartLegend

**Type**: component

Legend component for charts Re-export of Recharts Legend component with support for custom content. Use with ChartLegendContent for consistent styling and theming integration.

## JSX Usage

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

<ChartLegend
  content={value}
  payload={value}
  align={value}
  verticalAlign={value}
  height={0}
  width={0}
  wrapperStyle={value}
  wrapperClassName="value"
  layout={value}
  iconSize={0}
  iconType={value}
  margin={value}
  onClick={handleClick}
  onMouseEnter={handleMouseEnter}
  onMouseLeave={handleMouseLeave}
  formatter={() => {}}
/>
```

## Component Props

### content
- **Type**: `React.ComponentType<any> | React.ReactElement`
- **Required**: No
- **Description**: No description available

### payload
- **Type**: `Array<{
    value: string;
    type?: string;
    color?: string;
    dataKey?: string;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    payload?: any;
  }>`
- **Required**: No
- **Description**: No description available

### align
- **Type**: `"left" | "center" | "right"`
- **Required**: No
- **Description**: No description available

### verticalAlign
- **Type**: `"top" | "middle" | "bottom"`
- **Required**: No
- **Description**: No description available

### height
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### width
- **Type**: `number`
- **Required**: No
- **Description**: No description available

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

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

### layout
- **Type**: `"horizontal" | "vertical"`
- **Required**: No
- **Description**: No description available

### iconSize
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### iconType
- **Type**: `| "line"
    | "rect"
    | "circle"
    | "cross"
    | "diamond"
    | "square"
    | "star"
    | "triangle"
    | "wye"`
- **Required**: No
- **Description**: No description available

### margin
- **Type**: `{ top?: number; right?: number; bottom?: number; left?: number }`
- **Required**: No
- **Description**: No description available

### onClick
- **Type**: `(data: any, index: number, event: React.MouseEvent) => void`
- **Required**: No
- **Description**: No description available

### onMouseEnter
- **Type**: `(data: any, index: number, event: React.MouseEvent) => void`
- **Required**: No
- **Description**: No description available

### onMouseLeave
- **Type**: `(data: any, index: number, event: React.MouseEvent) => void`
- **Required**: No
- **Description**: No description available

### formatter
- **Type**: `(value: any, entry: any, index: number) => React.ReactNode`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic legend
<ChartLegend content={<ChartLegendContent />} />
```
### Example 2
```tsx
// Legend positioned at top
<ChartLegend
  content={<ChartLegendContent />}
  verticalAlign="top"
  height={36}
/>
```