# ChartContainer

Container for rendering data visualizations using Recharts

## ChartContainer[​](#chartcontainer-1 "Direct link to 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[​](#props "Direct link to Props")

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

### Usage[​](#usage "Direct link to Usage")

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

<ChartContainer /* props */ />

```

## ChartLegend[​](#chartlegend "Direct link to 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[​](#props-1 "Direct link to 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[​](#usage-1 "Direct link to Usage")

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

<ChartLegend /* props */ />

```

## ChartLegendContent[​](#chartlegendcontent "Direct link to 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[​](#props-2 "Direct link to Props")

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

### Usage[​](#usage-2 "Direct link to Usage")

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

<ChartLegendContent /* props */ />

```

## ChartStyle[​](#chartstyle "Direct link to 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[​](#props-3 "Direct link to Props")

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

### Usage[​](#usage-3 "Direct link to Usage")

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

<ChartStyle /* props */ />

```

## ChartTooltip[​](#charttooltip "Direct link to 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[​](#props-4 "Direct link to 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[​](#usage-4 "Direct link to Usage")

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

<ChartTooltip /* props */ />

```

## ChartTooltipContent[​](#charttooltipcontent "Direct link to 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[​](#props-5 "Direct link to 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[​](#usage-5 "Direct link to Usage")

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

<ChartTooltipContent /* props */ />

```
