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

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

# ChartTooltipContent

**Type**: component

Custom tooltip content component for charts Provides a styled tooltip that displays chart data with proper formatting, colors, and labels from the chart configuration. Supports multiple indicator styles, custom formatters, and automatic theming integration.

## JSX Usage

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

<ChartTooltipContent
  hideLabel={true}
  hideIndicator={true}
  indicator={value}
  nameKey="value"
  labelKey="value"
  active={true}
  payload={[]}
  className="value"
  label={value}
  formatter={() => {}}
  labelFormatter={[]}
  labelClassName="value"
  color="value"
/>
```

## Component Props

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

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

### indicator
- **Type**: `"line" | "dot" | "dashed"`
- **Required**: No
- **Description**: No description available

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

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

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

### payload
- **Type**: `any[]`
- **Required**: No
- **Description**: No description available

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

### label
- **Type**: `string | number`
- **Required**: No
- **Description**: No description available

### formatter
- **Type**: `(
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    value: any,
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    name: any,
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    props: any,
  ) => [React.ReactNode, React.ReactNode] | React.ReactNode`
- **Required**: No
- **Description**: No description available

### labelFormatter
- **Type**: `(label: any, payload: any[]) => React.ReactNode`
- **Required**: No
- **Description**: No description available

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

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

## Examples

### Example 1
```tsx
// Basic tooltip with default styling
<ChartTooltip content={<ChartTooltipContent />} />
```
### Example 2
```tsx
// Tooltip with custom value formatter
<ChartTooltip
  content={
    <ChartTooltipContent
      formatter={(value, name) => [
        `$${value.toLocaleString()}`,
        name.toUpperCase()
      ]}
    />
  }
/>
```
### Example 3
```tsx
// Tooltip with line indicator and custom label
<ChartTooltip
  content={
    <ChartTooltipContent
      indicator="line"
      labelFormatter={(label) => `Week of ${label}`}
      hideLabel={false}
    />
  }
/>
```
### Example 4
```tsx
// Tooltip with dashed indicator and no icons
<ChartTooltip
  content={
    <ChartTooltipContent
      indicator="dashed"
      hideIndicator={false}
      nameKey="category"
    />
  }
/>
```