# Chart

Recharts charts with Kivora colors and tooltips.

## How to use it

ChartContainer provides visual context; configure series using label and color. Give the chart an explicit height.

BarChart, Bar and XAxis come from recharts. Install recharts as a direct dependency if you import them in your application.

## Import


```tsx
import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<ChartContainer config={{visits:{label:"Visits",color:"#6558e8"}}} style={{width:"100%",height:240}}><BarChart data={[{day:"Mon",visits:120},{day:"Tue",visits:180},{day:"Wed",visits:145},{day:"Thu",visits:240},{day:"Fri",visits:310}]}><XAxis dataKey="day" /><ChartTooltip content={<ChartTooltipContent />} /><Bar dataKey="visits" fill="var(--color-visits)" radius={6} /></BarChart></ChartContainer>
```


## API: ChartContainer


```typescript
ChartContainer: React.ForwardRefExoticComponent<ChartContainerProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| config | ChartConfig | No | Associate chart series with labels and colors. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: ChartTooltip


```typescript
ChartTooltip: typeof RechartsPrimitive.Tooltip
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| active | boolean | No | 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 undefined, Recharts will control when the Tooltip displays. This includes mouse and keyboard controls. |
| allowEscapeViewBox | AllowInDimension | No | This option allows the tooltip to extend beyond the viewBox of the chart itself. |
| animationDuration | number | No | Specifies the duration of animation, the unit of this option is ms. |
| animationEasing | EasingInput | No | The type of easing function. |
| axisId | AxisId | No | Tooltip always attaches itself to the "Tooltip" axis. Which axis is it? Depends on the layout: - horizontal layout -> X axis - vertical layout -> Y axis - radial layout -> radial axis - centric layout -> angle axis  Tooltip will use the default axis for the layout, unless you specify an axisId. |
| content | ContentType<ValueType, NameType> | No | Renders the content of the tooltip.  This should return HTML elements, not SVG elements.  - If not set, the {@link DefaultTooltipContent } component is used. - If set to a React element, this element will be cloned and extra props will be passed in. - If set to a function, the function will be called and should return HTML elements. |
| contentStyle | CSSProperties | No | CSS styles to be applied to the wrapper `div` element. |
| cursor | CursorDefinition | No | If set false, no cursor will be drawn when tooltip is active. If set a object, the option is the configuration of cursor. If set a React element, the option is the custom react element of drawing cursor. |
| defaultIndex | number \| TooltipIndex | No | See the published type. |
| filterNull | boolean | No | When an item of the payload has value null or undefined, this item won't be displayed. |
| formatter | (Formatter<ValueType, NameType> & ((value: ValueType, name: NameType, item: TooltipPayloadEntry, index: number, payload: TooltipPayload) => ReactNode \| [ReactNode, ReactNode])) | No | Function to customize the value in the tooltip. If you return an array, the first entry will be the formatted "value", and the second entry will be the formatted "name" |
| includeHidden | boolean | No | If true, the tooltip will display information about hidden series. Defaults to false. Interacting with the hide property of Area, Bar, Line, Scatter. |
| isAnimationActive | boolean \| "auto" | No | If set false, animation of tooltip will be disabled. If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility. |
| itemSorter | (TooltipItemSorter<ValueType, NameType> & TooltipItemSorter) | No | Sorts tooltip items. Defaults to 'name' which means it sorts alphabetically by graphical item `name` property. |
| itemStyle | CSSProperties | No | Style of individual items inside the tooltip, a `<li>` element. These show the data label (name, or dataKey) and value.  If a chart has multiple graphical items then the Tooltip renders multiple item and each of them gets this itemStyle applied. |
| labelClassName | string | No | See the published type. |
| labelFormatter | (((label: ReactNode, payload: readonly Payload<ValueType, NameType>[]) => ReactNode) & ((label: ReactNode, payload: TooltipPayload) => ReactNode)) | No | The formatter function of label in tooltip. |
| labelStyle | CSSProperties | No | "Label" is the tooltip title. Renders once on the top of tooltip and shows categorical axis value.  Even if there are multiple graphical items in the chart, only one label gets rendered.  Note that "Label" in tooltip is the header, which is different from {@link Legend } where "labelStyle" are the individual items. |
| offset | number \| Coordinate | No | The offset size between the position of tooltip and the mouse cursor position. When a number is provided, the same offset is applied to both x and y axes.  When a Coordinate object is provided, you can specify different offsets for each axis (x and y as numbers) |
| payloadUniqBy | UniqueOption<TooltipPayloadEntry> | No | See the published type. |
| portal | HTMLElement \| null | No | If portal is defined, then Tooltip will use this element as a target for rendering using React Portal: https://react.dev/reference/react-dom/createPortal  If this is undefined then Tooltip renders inside the recharts-wrapper element. |
| position | Partial<Coordinate> | No | If this field is set, the tooltip will be displayed at the specified position regardless of the mouse position.  You can set a single field (x or y) and let the other field be calculated automatically based on the mouse position. |
| reverseDirection | AllowInDimension | No | See the published type. |
| separator | string | No | The separator between name and value. |
| shared | boolean | No | Defines whether the tooltip is reacting to the current data point, or to all data points at the current axis coordinate.  - `true`: tooltip will appear on top of all bars on an axis tick. - `false`: tooltip will appear on individual bars.  Different chart types allow different modes, and have different defaults. |
| trigger | "hover" \| "click" | No | If `hover` then the Tooltip shows on mouse enter and hides on mouse leave.  If `click` then the Tooltip shows after clicking and stays active. |
| useTranslate3d | boolean | No | See the published type. |
| wrapperClassName | string | No | See the published type. |
| wrapperStyle | CSSProperties | No | CSS styles to be applied to the wrapper `div` element. |

## API: ChartTooltipContent


```typescript
declare function ChartTooltipContent({ active, className, formatter, label, payload, ...props }: ChartTooltipContentProps): React.JSX.Element | null;
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| active | boolean | No | See the published type. |
| aria-label | string | No | Accessible name of the control. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| formatter | ((value: unknown, name: string) => ReactNode) | No | See the published type. |
| id | string | No | Element identifier; associates labels and descriptions. |
| label | ReactNode | No | Text or accessible label. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| payload | { color?: string; dataKey?: string \| number; name?: string; value?: unknown; }[] | No | See the published type. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: ChartLegend


```typescript
ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| align | "center" \| "left" \| "right" | No | Content alignment. |
| aria-label | string | No | Accessible name of the control. |
| children | ReactNode | No | Content or child elements of the component. |
| content | ContentType | No | Renders the content of the legend.  This should return HTML elements, not SVG elements.  - If not set, the {@link DefaultLegendContent } component is used. - If set to a React element, this element will be cloned and extra props will be passed in. - If set to a function, the function will be called and should return HTML elements. |
| dangerouslySetInnerHTML | { __html: string; } | No | See the published type. |
| formatter | Formatter | No | Function to customize how content is serialized before rendering.  This should return HTML elements, or strings. |
| height | string \| number | No | Output height. |
| iconSize | number | No | The size of icon in each legend item. |
| iconType | "circle" \| "line" \| "rect" \| "none" \| "cross" \| "diamond" \| "plainline" \| "square" \| "star" \| "triangle" \| "wye" | No | The type of icon in each legend item. |
| inactiveColor | string | No | The color of the icon when the item is inactive. |
| itemSorter | LegendItemSorter \| null | No | Sorts Legend items. Defaults to `value` which means it will sort alphabetically by the label.  If `null` is provided then the payload is not sorted. Be aware that without sort, the order of items may change between renders! |
| labelStyle | CSSProperties | No | Style of individual items inside the Legend, a `<span>` element. These show the data label (name, or dataKey) and value.  If a chart has multiple graphical items then the Legend renders multiple item and each of them gets this itemStyle applied.  Pie charts render multiple labels from a single data series.  Note that this is different from {@link Tooltip }: - in Tooltip: "labelStyle" styles the title / header - in Tooltip: "itemStyle" styles the individual data points - in Legend: "labelStyle" styles the individual data points  Beware of the naming inconsistency! |
| layout | "auto" \| "horizontal" \| "vertical" | No | The layout of legend items inside the legend container.  When `auto` then the layout is decided based on the `position` prop: - in `left`\|`right` positions, the layout is vertical - otherwise horizontal - if position is undefined, also horizontal  `auto` value is new since 3.10 |
| offset | number | No | The offset to the specified `position`. Direction of the offset depends on the position. |
| onAbort | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onAbortCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onAnimationEnd | AdaptChildAnimationEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onAnimationEndCapture | AdaptChildAnimationEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onAnimationIteration | AdaptChildAnimationEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onAnimationIterationCapture | AdaptChildAnimationEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onAnimationStart | AdaptChildAnimationEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onAnimationStartCapture | AdaptChildAnimationEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onAuxClick | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onAuxClickCapture | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onBBoxUpdate | ((box: ElementOffset \| null) => void) | No | See the published type. |
| onBeforeInput | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onBeforeInputCapture | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onBlur | AdaptChildFocusEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onBlurCapture | AdaptChildFocusEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onCanPlay | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onCanPlayCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onCanPlayThrough | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onCanPlayThroughCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onChange | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onChangeCapture | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onClick | ((data: LegendPayload, index: number, event: MouseEvent<HTMLElement, MouseEvent>) => void) | No | Action performed when the element is activated. |
| onClickCapture | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onCompositionEnd | AdaptChildCompositionEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onCompositionEndCapture | AdaptChildCompositionEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onCompositionStart | AdaptChildCompositionEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onCompositionStartCapture | AdaptChildCompositionEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onCompositionUpdate | AdaptChildCompositionEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onCompositionUpdateCapture | AdaptChildCompositionEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onContextMenu | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onContextMenuCapture | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onCopy | AdaptChildClipboardEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onCopyCapture | AdaptChildClipboardEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onCut | AdaptChildClipboardEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onCutCapture | AdaptChildClipboardEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDoubleClick | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDoubleClickCapture | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDrag | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDragCapture | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDragEnd | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDragEndCapture | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDragEnter | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDragEnterCapture | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDragExit | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDragExitCapture | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDragLeave | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDragLeaveCapture | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDragOver | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDragOverCapture | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDragStart | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDragStartCapture | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDrop | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDropCapture | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDurationChange | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onDurationChangeCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onEmptied | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onEmptiedCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onEncrypted | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onEncryptedCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onEnded | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onEndedCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onError | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | Receives errors for the application to handle. |
| onErrorCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onFocus | AdaptChildFocusEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onFocusCapture | AdaptChildFocusEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onGotPointerCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onGotPointerCaptureCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onInput | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onInputCapture | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onInvalid | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onInvalidCapture | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onKeyDown | AdaptChildKeyboardEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onKeyDownCapture | AdaptChildKeyboardEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onKeyPress | AdaptChildKeyboardEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onKeyPressCapture | AdaptChildKeyboardEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onKeyUp | AdaptChildKeyboardEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onKeyUpCapture | AdaptChildKeyboardEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onLoad | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onLoadCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onLoadedData | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onLoadedDataCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onLoadedMetadata | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onLoadedMetadataCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onLoadStart | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onLoadStartCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onLostPointerCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onLostPointerCaptureCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onMouseDown | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onMouseDownCapture | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onMouseEnter | ((data: LegendPayload, index: number, event: MouseEvent<HTMLElement, MouseEvent>) => void) | No | The customized event handler of mouseenter on the items in this group |
| onMouseLeave | ((data: LegendPayload, index: number, event: MouseEvent<HTMLElement, MouseEvent>) => void) | No | The customized event handler of mouseleave on the items in this group |
| onMouseMove | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onMouseMoveCapture | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onMouseOut | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onMouseOutCapture | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onMouseOver | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onMouseOverCapture | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onMouseUp | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onMouseUpCapture | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPaste | AdaptChildClipboardEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPasteCapture | AdaptChildClipboardEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPause | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPauseCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPlay | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPlayCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPlaying | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPlayingCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPointerCancel | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPointerCancelCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPointerDown | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPointerDownCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPointerEnter | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPointerEnterCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPointerLeave | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPointerLeaveCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPointerMove | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPointerMoveCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPointerOut | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPointerOutCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPointerOver | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPointerOverCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPointerUp | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onPointerUpCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onProgress | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onProgressCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onRateChange | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onRateChangeCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onReset | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onResetCapture | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onScroll | AdaptChildUIEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onScrollCapture | AdaptChildUIEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onSeeked | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onSeekedCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onSeeking | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onSeekingCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onSelect | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | Action or selection made by the user. |
| onSelectCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onStalled | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onStalledCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onSubmit | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | Form submission event. |
| onSubmitCapture | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onSuspend | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onSuspendCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onTimeUpdate | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onTimeUpdateCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onTouchCancel | AdaptChildTouchEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onTouchCancelCapture | AdaptChildTouchEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onTouchEnd | AdaptChildTouchEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onTouchEndCapture | AdaptChildTouchEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onTouchMove | AdaptChildTouchEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onTouchMoveCapture | AdaptChildTouchEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onTouchStart | AdaptChildTouchEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onTouchStartCapture | AdaptChildTouchEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onTransitionEnd | AdaptChildTransitionEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onTransitionEndCapture | AdaptChildTransitionEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onVolumeChange | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onVolumeChangeCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onWaiting | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onWaitingCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onWheel | AdaptChildWheelEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| onWheelCapture | AdaptChildWheelEventHandler<LegendPayload, ReactElement<unknown, string \| JSXElementConstructor<any>>> | No | See the published type. |
| payloadUniqBy | UniqueOption<LegendPayload> | No | See the published type. |
| portal | HTMLElement \| null | No | If portal is defined, then Legend will use this element as a target for rendering using React Portal.  If this is undefined then Legend renders inside the recharts-wrapper element. |
| position | CartesianPosition | No | The position of the legend relative to the chart. If this is defined, it overrides `align` and `verticalAlign`. |
| verticalAlign | "top" \| "bottom" \| "middle" | No | See the published type. |
| width | string \| number | No | Output width. |
| wrapperStyle | CSSProperties | No | CSS styles to be applied to the wrapper `div` element. |

Source: https://kivora.pro/docs/componentes/chart