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

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

# ChartLegendContent

**Type**: component

Custom legend content component for charts Provides a styled legend that displays chart series with colors and labels from the chart configuration. Supports icon display, custom positioning, and automatic theming integration.

## JSX Usage

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

<ChartLegendContent
  hideIcon={true}
  nameKey="value"
  payload={value}
  verticalAlign={value}
  className="value"
/>
```

## Component Props

### hideIcon
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### nameKey
- **Type**: `string`
- **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

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

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

## Examples

### Example 1
```tsx
// Basic legend with default settings
<ChartLegend content={<ChartLegendContent />} />
```
### Example 2
```tsx
// Legend positioned at top without icons
<ChartLegend
  content={
    <ChartLegendContent
      verticalAlign="top"
      hideIcon={true}
    />
  }
/>
```
### Example 3
```tsx
// Legend with custom name key
<ChartLegend
  content={
    <ChartLegendContent
      nameKey="category"
      className="justify-start"
    />
  }
/>
```