Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# 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`

### Props​

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

### Usage​

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

    <ChartContainer /* props */ />

## 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`

### 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​

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

    <ChartLegend /* props */ />

## ChartLegendContent​

Source: `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​

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

    <ChartLegendContent /* props */ />

## ChartStyle​

Source: `packages/appkit-ui/src/react/ui/chart.tsx`

### Props​

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

### Usage​

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

    <ChartStyle /* props */ />

## 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`

### 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​

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

    <ChartTooltip /* props */ />

## ChartTooltipContent​

Source: `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​

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

    <ChartTooltipContent /* props */ />