# ChartContainer

Container for rendering data visualizations using Recharts

## ChartContainer

Container for rendering data visualizations using Recharts

**Source:** [`packages/appkit-ui/src/react/ui/chart.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/chart.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `config` | `ChartConfig` | ✓ | - | - |

### Usage

```tsx
import { ChartContainer } from '@databricks/appkit-ui';

```

## ChartLegend

A wrapper component for Recharts Legend with proper typing and documentation support.
It is needed to ensure the correct name is displayed in the docs.

**Source:** [`packages/appkit-ui/src/react/ui/chart.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/chart.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `content` | `ContentType` |  | - | - |
| `dangerouslySetInnerHTML` | `{ __html: string; }` |  | - | - |
| `onCopy` | `AdaptChildClipboardEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onCopyCapture` | `AdaptChildClipboardEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onCut` | `AdaptChildClipboardEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onCutCapture` | `AdaptChildClipboardEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPaste` | `AdaptChildClipboardEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPasteCapture` | `AdaptChildClipboardEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onCompositionEnd` | `AdaptChildCompositionEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onCompositionEndCapture` | `AdaptChildCompositionEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onCompositionStart` | `AdaptChildCompositionEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onCompositionStartCapture` | `AdaptChildCompositionEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onCompositionUpdate` | `AdaptChildCompositionEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onCompositionUpdateCapture` | `AdaptChildCompositionEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onFocus` | `AdaptChildFocusEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onFocusCapture` | `AdaptChildFocusEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onBlur` | `AdaptChildFocusEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onBlurCapture` | `AdaptChildFocusEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onChange` | `AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onChangeCapture` | `AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onBeforeInput` | `AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onBeforeInputCapture` | `AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onInput` | `AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onInputCapture` | `AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onReset` | `AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onResetCapture` | `AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onSubmit` | `AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onSubmitCapture` | `AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onInvalid` | `AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onInvalidCapture` | `AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onLoad` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onLoadCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onError` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onErrorCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onKeyDown` | `AdaptChildKeyboardEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onKeyDownCapture` | `AdaptChildKeyboardEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onKeyPress` | `AdaptChildKeyboardEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onKeyPressCapture` | `AdaptChildKeyboardEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onKeyUp` | `AdaptChildKeyboardEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onKeyUpCapture` | `AdaptChildKeyboardEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onAbort` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onAbortCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onCanPlay` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onCanPlayCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onCanPlayThrough` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onCanPlayThroughCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDurationChange` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDurationChangeCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onEmptied` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onEmptiedCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onEncrypted` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onEncryptedCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onEnded` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onEndedCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onLoadedData` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onLoadedDataCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onLoadedMetadata` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onLoadedMetadataCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onLoadStart` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onLoadStartCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPause` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPauseCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPlay` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPlayCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPlaying` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPlayingCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onProgress` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onProgressCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onRateChange` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onRateChangeCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onSeeked` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onSeekedCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onSeeking` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onSeekingCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onStalled` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onStalledCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onSuspend` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onSuspendCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onTimeUpdate` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onTimeUpdateCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onVolumeChange` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onVolumeChangeCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onWaiting` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onWaitingCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onAuxClick` | `AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onAuxClickCapture` | `AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onClick` | `((data: Payload, index: number, event: MouseEvent<Element, MouseEvent>) => void)` |  | - | - |
| `onClickCapture` | `AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onContextMenu` | `AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onContextMenuCapture` | `AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDoubleClick` | `AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDoubleClickCapture` | `AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDrag` | `AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDragCapture` | `AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDragEnd` | `AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDragEndCapture` | `AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDragEnter` | `AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDragEnterCapture` | `AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDragExit` | `AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDragExitCapture` | `AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDragLeave` | `AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDragLeaveCapture` | `AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDragOver` | `AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDragOverCapture` | `AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDragStart` | `AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDragStartCapture` | `AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDrop` | `AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onDropCapture` | `AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onMouseDown` | `AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onMouseDownCapture` | `AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onMouseEnter` | `((data: Payload, index: number, event: MouseEvent<Element, MouseEvent>) => void)` |  | - | - |
| `onMouseLeave` | `((data: Payload, index: number, event: MouseEvent<Element, MouseEvent>) => void)` |  | - | - |
| `onMouseMove` | `AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onMouseMoveCapture` | `AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onMouseOut` | `AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onMouseOutCapture` | `AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onMouseOver` | `AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onMouseOverCapture` | `AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onMouseUp` | `AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onMouseUpCapture` | `AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onSelect` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onSelectCapture` | `AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onTouchCancel` | `AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onTouchCancelCapture` | `AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onTouchEnd` | `AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onTouchEndCapture` | `AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onTouchMove` | `AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onTouchMoveCapture` | `AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onTouchStart` | `AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onTouchStartCapture` | `AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPointerDown` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPointerDownCapture` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPointerMove` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPointerMoveCapture` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPointerUp` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPointerUpCapture` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPointerCancel` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPointerCancelCapture` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPointerEnter` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPointerLeave` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPointerOver` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPointerOverCapture` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPointerOut` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPointerOutCapture` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onGotPointerCapture` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onGotPointerCaptureCapture` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onLostPointerCapture` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onLostPointerCaptureCapture` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onScroll` | `AdaptChildUIEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onScrollCapture` | `AdaptChildUIEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onWheel` | `AdaptChildWheelEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onWheelCapture` | `AdaptChildWheelEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onAnimationStart` | `AdaptChildAnimationEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onAnimationStartCapture` | `AdaptChildAnimationEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onAnimationEnd` | `AdaptChildAnimationEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onAnimationEndCapture` | `AdaptChildAnimationEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onAnimationIteration` | `AdaptChildAnimationEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onAnimationIterationCapture` | `AdaptChildAnimationEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onTransitionEnd` | `AdaptChildTransitionEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onTransitionEndCapture` | `AdaptChildTransitionEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `formatter` | `Formatter` |  | - | - |
| `payload` | `Payload[]` |  | - | - |
| `payloadUniqBy` | `UniqueOption<Payload>` |  | - | - |
| `wrapperStyle` | `CSSProperties` |  | - | - |
| `onPointerEnterCapture` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `onPointerLeaveCapture` | `AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementConstructor<any>>>` |  | - | - |
| `iconSize` | `number` |  | - | - |
| `iconType` | `enum` |  | - | - |
| `layout` | `enum` |  | - | - |
| `align` | `enum` |  | - | - |
| `verticalAlign` | `enum` |  | - | - |
| `inactiveColor` | `string` |  | - | - |
| `chartWidth` | `number` |  | - | - |
| `chartHeight` | `number` |  | - | - |
| `margin` | `{ top?: number; left?: number; bottom?: number \| undefined; right?: number \| undefined; } \| undefined` |  | - | - |
| `onBBoxUpdate` | `((box: DOMRect \| null) => void)` |  | - | - |

### Usage

```tsx
import { ChartLegend } from '@databricks/appkit-ui';

```

## ChartLegendContent

**Source:** [`packages/appkit-ui/src/react/ui/chart.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/chart.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `verticalAlign` | `enum` |  | - | - |
| `payload` | `any[]` |  | `[] as any[]` | - |
| `hideIcon` | `boolean` |  | `false` | - |
| `nameKey` | `string` |  | - | - |

### Usage

```tsx
import { ChartLegendContent } from '@databricks/appkit-ui';

```

## ChartStyle

**Source:** [`packages/appkit-ui/src/react/ui/chart.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/chart.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `id` | `string` | ✓ | - | - |
| `config` | `ChartConfig` | ✓ | - | - |

### Usage

```tsx
import { ChartStyle } from '@databricks/appkit-ui';

```

## ChartTooltip

A wrapper component for Recharts Tooltip with proper typing and documentation support.
It is needed to ensure the correct name is displayed in the docs.

**Source:** [`packages/appkit-ui/src/react/ui/chart.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/chart.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `separator` | `string` |  | - | - |
| `wrapperClassName` | `string` |  | - | - |
| `labelClassName` | `string` |  | - | - |
| `formatter` | `Formatter<any, any>` |  | - | - |
| `contentStyle` | `CSSProperties` |  | - | - |
| `itemStyle` | `CSSProperties` |  | - | - |
| `labelStyle` | `CSSProperties` |  | - | - |
| `labelFormatter` | `((label: any, payload: Payload<any, any>[]) => ReactNode)` |  | - | - |
| `label` | `any` |  | - | - |
| `payload` | `Payload<any, any>[]` |  | - | - |
| `itemSorter` | `((item: Payload<any, any>) => string \| number)` |  | - | - |
| `accessibilityLayer` | `boolean` |  | - | - |
| `active` | `boolean` |  | - | If true, then Tooltip is always displayed, once an activeIndex is set by mouse over, or programmatically. If false, then Tooltip is never displayed. If active is undefined, Recharts will control when the Tooltip displays. This includes mouse and keyboard controls. |
| `includeHidden` | `boolean` |  | - | If true, then Tooltip will information about hidden series (defaults to false). Interacting with the hide property of Area, Bar, Line, Scatter. |
| `allowEscapeViewBox` | `AllowInDimension` |  | - | - |
| `animationDuration` | `number` |  | - | - |
| `animationEasing` | `enum` |  | - | - |
| `content` | `ContentType<any, any>` |  | - | - |
| `coordinate` | `Partial<Coordinate>` |  | - | - |
| `cursor` | `boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| SVGProps<SVGElement>` |  | - | - |
| `filterNull` | `boolean` |  | - | - |
| `defaultIndex` | `number` |  | - | - |
| `isAnimationActive` | `boolean` |  | - | - |
| `offset` | `number` |  | - | - |
| `payloadUniqBy` | `UniqueOption<Payload<any, any>>` |  | - | - |
| `position` | `Partial<Coordinate>` |  | - | - |
| `reverseDirection` | `AllowInDimension` |  | - | - |
| `shared` | `boolean` |  | - | - |
| `trigger` | `enum` |  | - | - |
| `useTranslate3d` | `boolean` |  | - | - |
| `viewBox` | `CartesianViewBox` |  | - | - |
| `wrapperStyle` | `CSSProperties` |  | - | - |

### Usage

```tsx
import { ChartTooltip } from '@databricks/appkit-ui';

```

## ChartTooltipContent

**Source:** [`packages/appkit-ui/src/react/ui/chart.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/chart.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `active` | `boolean` |  | - | - |
| `payload` | `any[]` |  | - | - |
| `label` | `string` |  | `"" as string` | - |
| `labelFormatter` | `((value: any, payload: any[]) => ReactNode)` |  | - | - |
| `formatter` | `((value: any, name: any, item: any, index: number, payload: any) => ReactNode)` |  | - | - |
| `hideLabel` | `boolean` |  | `false` | - |
| `hideIndicator` | `boolean` |  | `false` | - |
| `indicator` | `enum` |  | `dot` | - |
| `labelClassName` | `string` |  | - | - |
| `nameKey` | `string` |  | - | - |
| `labelKey` | `string` |  | - | - |

### Usage

```tsx
import { ChartTooltipContent } from '@databricks/appkit-ui';

```