# 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'; ``` ## 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>>` | | - | - | | `onCopyCapture` | `AdaptChildClipboardEventHandler>>` | | - | - | | `onCut` | `AdaptChildClipboardEventHandler>>` | | - | - | | `onCutCapture` | `AdaptChildClipboardEventHandler>>` | | - | - | | `onPaste` | `AdaptChildClipboardEventHandler>>` | | - | - | | `onPasteCapture` | `AdaptChildClipboardEventHandler>>` | | - | - | | `onCompositionEnd` | `AdaptChildCompositionEventHandler>>` | | - | - | | `onCompositionEndCapture` | `AdaptChildCompositionEventHandler>>` | | - | - | | `onCompositionStart` | `AdaptChildCompositionEventHandler>>` | | - | - | | `onCompositionStartCapture` | `AdaptChildCompositionEventHandler>>` | | - | - | | `onCompositionUpdate` | `AdaptChildCompositionEventHandler>>` | | - | - | | `onCompositionUpdateCapture` | `AdaptChildCompositionEventHandler>>` | | - | - | | `onFocus` | `AdaptChildFocusEventHandler>>` | | - | - | | `onFocusCapture` | `AdaptChildFocusEventHandler>>` | | - | - | | `onBlur` | `AdaptChildFocusEventHandler>>` | | - | - | | `onBlurCapture` | `AdaptChildFocusEventHandler>>` | | - | - | | `onChange` | `AdaptChildFormEventHandler>>` | | - | - | | `onChangeCapture` | `AdaptChildFormEventHandler>>` | | - | - | | `onBeforeInput` | `AdaptChildFormEventHandler>>` | | - | - | | `onBeforeInputCapture` | `AdaptChildFormEventHandler>>` | | - | - | | `onInput` | `AdaptChildFormEventHandler>>` | | - | - | | `onInputCapture` | `AdaptChildFormEventHandler>>` | | - | - | | `onReset` | `AdaptChildFormEventHandler>>` | | - | - | | `onResetCapture` | `AdaptChildFormEventHandler>>` | | - | - | | `onSubmit` | `AdaptChildFormEventHandler>>` | | - | - | | `onSubmitCapture` | `AdaptChildFormEventHandler>>` | | - | - | | `onInvalid` | `AdaptChildFormEventHandler>>` | | - | - | | `onInvalidCapture` | `AdaptChildFormEventHandler>>` | | - | - | | `onLoad` | `AdaptChildReactEventHandler>>` | | - | - | | `onLoadCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onError` | `AdaptChildReactEventHandler>>` | | - | - | | `onErrorCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onKeyDown` | `AdaptChildKeyboardEventHandler>>` | | - | - | | `onKeyDownCapture` | `AdaptChildKeyboardEventHandler>>` | | - | - | | `onKeyPress` | `AdaptChildKeyboardEventHandler>>` | | - | - | | `onKeyPressCapture` | `AdaptChildKeyboardEventHandler>>` | | - | - | | `onKeyUp` | `AdaptChildKeyboardEventHandler>>` | | - | - | | `onKeyUpCapture` | `AdaptChildKeyboardEventHandler>>` | | - | - | | `onAbort` | `AdaptChildReactEventHandler>>` | | - | - | | `onAbortCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onCanPlay` | `AdaptChildReactEventHandler>>` | | - | - | | `onCanPlayCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onCanPlayThrough` | `AdaptChildReactEventHandler>>` | | - | - | | `onCanPlayThroughCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onDurationChange` | `AdaptChildReactEventHandler>>` | | - | - | | `onDurationChangeCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onEmptied` | `AdaptChildReactEventHandler>>` | | - | - | | `onEmptiedCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onEncrypted` | `AdaptChildReactEventHandler>>` | | - | - | | `onEncryptedCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onEnded` | `AdaptChildReactEventHandler>>` | | - | - | | `onEndedCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onLoadedData` | `AdaptChildReactEventHandler>>` | | - | - | | `onLoadedDataCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onLoadedMetadata` | `AdaptChildReactEventHandler>>` | | - | - | | `onLoadedMetadataCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onLoadStart` | `AdaptChildReactEventHandler>>` | | - | - | | `onLoadStartCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onPause` | `AdaptChildReactEventHandler>>` | | - | - | | `onPauseCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onPlay` | `AdaptChildReactEventHandler>>` | | - | - | | `onPlayCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onPlaying` | `AdaptChildReactEventHandler>>` | | - | - | | `onPlayingCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onProgress` | `AdaptChildReactEventHandler>>` | | - | - | | `onProgressCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onRateChange` | `AdaptChildReactEventHandler>>` | | - | - | | `onRateChangeCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onSeeked` | `AdaptChildReactEventHandler>>` | | - | - | | `onSeekedCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onSeeking` | `AdaptChildReactEventHandler>>` | | - | - | | `onSeekingCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onStalled` | `AdaptChildReactEventHandler>>` | | - | - | | `onStalledCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onSuspend` | `AdaptChildReactEventHandler>>` | | - | - | | `onSuspendCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onTimeUpdate` | `AdaptChildReactEventHandler>>` | | - | - | | `onTimeUpdateCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onVolumeChange` | `AdaptChildReactEventHandler>>` | | - | - | | `onVolumeChangeCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onWaiting` | `AdaptChildReactEventHandler>>` | | - | - | | `onWaitingCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onAuxClick` | `AdaptChildMouseEventHandler>>` | | - | - | | `onAuxClickCapture` | `AdaptChildMouseEventHandler>>` | | - | - | | `onClick` | `((data: Payload, index: number, event: MouseEvent) => void)` | | - | - | | `onClickCapture` | `AdaptChildMouseEventHandler>>` | | - | - | | `onContextMenu` | `AdaptChildMouseEventHandler>>` | | - | - | | `onContextMenuCapture` | `AdaptChildMouseEventHandler>>` | | - | - | | `onDoubleClick` | `AdaptChildMouseEventHandler>>` | | - | - | | `onDoubleClickCapture` | `AdaptChildMouseEventHandler>>` | | - | - | | `onDrag` | `AdaptChildDragEventHandler>>` | | - | - | | `onDragCapture` | `AdaptChildDragEventHandler>>` | | - | - | | `onDragEnd` | `AdaptChildDragEventHandler>>` | | - | - | | `onDragEndCapture` | `AdaptChildDragEventHandler>>` | | - | - | | `onDragEnter` | `AdaptChildDragEventHandler>>` | | - | - | | `onDragEnterCapture` | `AdaptChildDragEventHandler>>` | | - | - | | `onDragExit` | `AdaptChildDragEventHandler>>` | | - | - | | `onDragExitCapture` | `AdaptChildDragEventHandler>>` | | - | - | | `onDragLeave` | `AdaptChildDragEventHandler>>` | | - | - | | `onDragLeaveCapture` | `AdaptChildDragEventHandler>>` | | - | - | | `onDragOver` | `AdaptChildDragEventHandler>>` | | - | - | | `onDragOverCapture` | `AdaptChildDragEventHandler>>` | | - | - | | `onDragStart` | `AdaptChildDragEventHandler>>` | | - | - | | `onDragStartCapture` | `AdaptChildDragEventHandler>>` | | - | - | | `onDrop` | `AdaptChildDragEventHandler>>` | | - | - | | `onDropCapture` | `AdaptChildDragEventHandler>>` | | - | - | | `onMouseDown` | `AdaptChildMouseEventHandler>>` | | - | - | | `onMouseDownCapture` | `AdaptChildMouseEventHandler>>` | | - | - | | `onMouseEnter` | `((data: Payload, index: number, event: MouseEvent) => void)` | | - | - | | `onMouseLeave` | `((data: Payload, index: number, event: MouseEvent) => void)` | | - | - | | `onMouseMove` | `AdaptChildMouseEventHandler>>` | | - | - | | `onMouseMoveCapture` | `AdaptChildMouseEventHandler>>` | | - | - | | `onMouseOut` | `AdaptChildMouseEventHandler>>` | | - | - | | `onMouseOutCapture` | `AdaptChildMouseEventHandler>>` | | - | - | | `onMouseOver` | `AdaptChildMouseEventHandler>>` | | - | - | | `onMouseOverCapture` | `AdaptChildMouseEventHandler>>` | | - | - | | `onMouseUp` | `AdaptChildMouseEventHandler>>` | | - | - | | `onMouseUpCapture` | `AdaptChildMouseEventHandler>>` | | - | - | | `onSelect` | `AdaptChildReactEventHandler>>` | | - | - | | `onSelectCapture` | `AdaptChildReactEventHandler>>` | | - | - | | `onTouchCancel` | `AdaptChildTouchEventHandler>>` | | - | - | | `onTouchCancelCapture` | `AdaptChildTouchEventHandler>>` | | - | - | | `onTouchEnd` | `AdaptChildTouchEventHandler>>` | | - | - | | `onTouchEndCapture` | `AdaptChildTouchEventHandler>>` | | - | - | | `onTouchMove` | `AdaptChildTouchEventHandler>>` | | - | - | | `onTouchMoveCapture` | `AdaptChildTouchEventHandler>>` | | - | - | | `onTouchStart` | `AdaptChildTouchEventHandler>>` | | - | - | | `onTouchStartCapture` | `AdaptChildTouchEventHandler>>` | | - | - | | `onPointerDown` | `AdaptChildPointerEventHandler>>` | | - | - | | `onPointerDownCapture` | `AdaptChildPointerEventHandler>>` | | - | - | | `onPointerMove` | `AdaptChildPointerEventHandler>>` | | - | - | | `onPointerMoveCapture` | `AdaptChildPointerEventHandler>>` | | - | - | | `onPointerUp` | `AdaptChildPointerEventHandler>>` | | - | - | | `onPointerUpCapture` | `AdaptChildPointerEventHandler>>` | | - | - | | `onPointerCancel` | `AdaptChildPointerEventHandler>>` | | - | - | | `onPointerCancelCapture` | `AdaptChildPointerEventHandler>>` | | - | - | | `onPointerEnter` | `AdaptChildPointerEventHandler>>` | | - | - | | `onPointerLeave` | `AdaptChildPointerEventHandler>>` | | - | - | | `onPointerOver` | `AdaptChildPointerEventHandler>>` | | - | - | | `onPointerOverCapture` | `AdaptChildPointerEventHandler>>` | | - | - | | `onPointerOut` | `AdaptChildPointerEventHandler>>` | | - | - | | `onPointerOutCapture` | `AdaptChildPointerEventHandler>>` | | - | - | | `onGotPointerCapture` | `AdaptChildPointerEventHandler>>` | | - | - | | `onGotPointerCaptureCapture` | `AdaptChildPointerEventHandler>>` | | - | - | | `onLostPointerCapture` | `AdaptChildPointerEventHandler>>` | | - | - | | `onLostPointerCaptureCapture` | `AdaptChildPointerEventHandler>>` | | - | - | | `onScroll` | `AdaptChildUIEventHandler>>` | | - | - | | `onScrollCapture` | `AdaptChildUIEventHandler>>` | | - | - | | `onWheel` | `AdaptChildWheelEventHandler>>` | | - | - | | `onWheelCapture` | `AdaptChildWheelEventHandler>>` | | - | - | | `onAnimationStart` | `AdaptChildAnimationEventHandler>>` | | - | - | | `onAnimationStartCapture` | `AdaptChildAnimationEventHandler>>` | | - | - | | `onAnimationEnd` | `AdaptChildAnimationEventHandler>>` | | - | - | | `onAnimationEndCapture` | `AdaptChildAnimationEventHandler>>` | | - | - | | `onAnimationIteration` | `AdaptChildAnimationEventHandler>>` | | - | - | | `onAnimationIterationCapture` | `AdaptChildAnimationEventHandler>>` | | - | - | | `onTransitionEnd` | `AdaptChildTransitionEventHandler>>` | | - | - | | `onTransitionEndCapture` | `AdaptChildTransitionEventHandler>>` | | - | - | | `formatter` | `Formatter` | | - | - | | `payload` | `Payload[]` | | - | - | | `payloadUniqBy` | `UniqueOption` | | - | - | | `wrapperStyle` | `CSSProperties` | | - | - | | `onPointerEnterCapture` | `AdaptChildPointerEventHandler>>` | | - | - | | `onPointerLeaveCapture` | `AdaptChildPointerEventHandler>>` | | - | - | | `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'; ``` ## 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'; ``` ## 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'; ``` ## 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` | | - | - | | `contentStyle` | `CSSProperties` | | - | - | | `itemStyle` | `CSSProperties` | | - | - | | `labelStyle` | `CSSProperties` | | - | - | | `labelFormatter` | `((label: any, payload: Payload[]) => ReactNode)` | | - | - | | `label` | `any` | | - | - | | `payload` | `Payload[]` | | - | - | | `itemSorter` | `((item: Payload) => 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` | | - | - | | `coordinate` | `Partial` | | - | - | | `cursor` | `boolean \| ReactElement> \| SVGProps` | | - | - | | `filterNull` | `boolean` | | - | - | | `defaultIndex` | `number` | | - | - | | `isAnimationActive` | `boolean` | | - | - | | `offset` | `number` | | - | - | | `payloadUniqBy` | `UniqueOption>` | | - | - | | `position` | `Partial` | | - | - | | `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'; ``` ## 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'; ```