DataInteractive playground
Chart
Recharts charts with Kivora colors and tooltips.
Preparing the playground…
Text and Markdown example
Chart · Example
1<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>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
React / Next.js
1import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend } from "@kivora/nextjs";Interactive examples run inside a component with "use client". The playground's Copy button includes the imports needed for the current example.
API reference 0.2.0
Types from the installed published version, including component properties and common HTML attributes. “Optional” does not imply a default value; omitting a property lets the component decide.
| Property | Type | Description |
|---|---|---|
aria-label | string | Accessible name of the control. |
children | ReactNode | Content or child elements of the component. |
className | string | Additional CSS classes to customize the element. |
config | ChartConfig | Associate chart series with labels and colors. |
defaultChecked | boolean | Initial selection of the control. |
defaultValue | string | number | readonly string[] | Initial value when the component manages its own state. |
id | string | Element identifier; associates labels and descriptions. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | Change event. Check the type: some controls return an object, others a DOM event. |
onClick | MouseEventHandler<HTMLDivElement> | Action performed when the element is activated. |
onSubmit | SubmitEventHandler<HTMLDivElement> | Form submission event. |
role | AriaRole | Semantic role of the element. Keep the default role unless a change is justified. |
style | CSSProperties | React inline styles. |
tabIndex | number | Keyboard focus order and availability. |
title | string | Title or supplementary information. |
Subcomponents and composition
Review each component's properties and published declaration. Native and accessibility attributes are inherited from the element specified by its type.
ChartContainer14 properties
ChartContainer · TypeScript
1ChartContainer: React.ForwardRefExoticComponent<ChartContainerProps & React.RefAttributes<HTMLDivElement>>ChartTooltip29 properties
| Property | Type | Description |
|---|---|---|
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 undefined, Recharts will control when the Tooltip displays. This includes mouse and keyboard controls. |
allowEscapeViewBox | AllowInDimension | This option allows the tooltip to extend beyond the viewBox of the chart itself. |
animationDuration | number | Specifies the duration of animation, the unit of this option is ms. |
animationEasing | EasingInput | The type of easing function. |
axisId | AxisId | 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> | 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 | CSS styles to be applied to the wrapper `div` element. |
cursor | CursorDefinition | 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 | Configures defaultIndex. The type describes the supported values and structure. |
filterNull | boolean | 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])) | 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 | 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" | 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) | Sorts tooltip items. Defaults to 'name' which means it sorts alphabetically by graphical item `name` property. |
itemStyle | CSSProperties | 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 | CSS classes for the specified element. |
labelFormatter | (((label: ReactNode, payload: readonly Payload<ValueType, NameType>[]) => ReactNode) & ((label: ReactNode, payload: TooltipPayload) => ReactNode)) | The formatter function of label in tooltip. |
labelStyle | CSSProperties | "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 | 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> | Configures payloadUniqBy. The type describes the supported values and structure. |
portal | HTMLElement | null | 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> | 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 | Configures reverseDirection. The type describes the supported values and structure. |
separator | string | The separator between name and value. |
shared | boolean | 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" | 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 | Configures useTranslate3d. The type describes the supported values and structure. |
wrapperClassName | string | CSS classes for the specified element. |
wrapperStyle | CSSProperties | CSS styles to be applied to the wrapper `div` element. |
ChartTooltip · TypeScript
1ChartTooltip: typeof RechartsPrimitive.TooltipChartTooltipContent17 properties
| Property | Type | Description |
|---|---|---|
active | boolean | Configures active. The type describes the supported values and structure. |
aria-label | string | Accessible name of the control. |
children | ReactNode | Content or child elements of the component. |
className | string | Additional CSS classes to customize the element. |
defaultChecked | boolean | Initial selection of the control. |
defaultValue | string | number | readonly string[] | Initial value when the component manages its own state. |
formatter | ((value: unknown, name: string) => ReactNode) | Configures formatter. The type describes the supported values and structure. |
id | string | Element identifier; associates labels and descriptions. |
label | ReactNode | Text or accessible label. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | Change event. Check the type: some controls return an object, others a DOM event. |
onClick | MouseEventHandler<HTMLDivElement> | Action performed when the element is activated. |
onSubmit | SubmitEventHandler<HTMLDivElement> | Form submission event. |
payload | { color?: string; dataKey?: string | number; name?: string; value?: unknown; }[] | Configures payload. The type describes the supported values and structure. |
role | AriaRole | Semantic role of the element. Keep the default role unless a change is justified. |
style | CSSProperties | React inline styles. |
tabIndex | number | Keyboard focus order and availability. |
title | string | Title or supplementary information. |
ChartTooltipContent · TypeScript
1declare function ChartTooltipContent({ active, className, formatter, label, payload, ...props }: ChartTooltipContentProps): React.JSX.Element | null;ChartLegend181 properties
| Property | Type | Description |
|---|---|---|
align | "center" | "left" | "right" | Content alignment. |
aria-label | string | Accessible name of the control. |
children | ReactNode | Content or child elements of the component. |
content | ContentType | 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; } | Configures dangerouslySetInnerHTML. The type describes the supported values and structure. |
formatter | Formatter | Function to customize how content is serialized before rendering. This should return HTML elements, or strings. |
height | string | number | Output height. |
iconSize | number | The size of icon in each legend item. |
iconType | "circle" | "line" | "rect" | "none" | "cross" | "diamond" | "plainline" | "square" | "star" | "triangle" | "wye" | The type of icon in each legend item. |
inactiveColor | string | The color of the icon when the item is inactive. |
itemSorter | LegendItemSorter | null | 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 | 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" | 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 | The offset to the specified `position`. Direction of the offset depends on the position. |
onAbort | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onAbortCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onAnimationEnd | AdaptChildAnimationEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onAnimationEndCapture | AdaptChildAnimationEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onAnimationIteration | AdaptChildAnimationEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onAnimationIterationCapture | AdaptChildAnimationEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onAnimationStart | AdaptChildAnimationEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onAnimationStartCapture | AdaptChildAnimationEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onAuxClick | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onAuxClickCapture | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onBBoxUpdate | ((box: ElementOffset | null) => void) | Callback for this event. The signature describes its arguments. |
onBeforeInput | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onBeforeInputCapture | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onBlur | AdaptChildFocusEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onBlurCapture | AdaptChildFocusEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onCanPlay | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onCanPlayCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onCanPlayThrough | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onCanPlayThroughCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onChange | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Change event. Check the type: some controls return an object, others a DOM event. |
onChangeCapture | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onClick | ((data: LegendPayload, index: number, event: MouseEvent<HTMLElement, MouseEvent>) => void) | Action performed when the element is activated. |
onClickCapture | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onCompositionEnd | AdaptChildCompositionEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onCompositionEndCapture | AdaptChildCompositionEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onCompositionStart | AdaptChildCompositionEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onCompositionStartCapture | AdaptChildCompositionEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onCompositionUpdate | AdaptChildCompositionEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onCompositionUpdateCapture | AdaptChildCompositionEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onContextMenu | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onContextMenuCapture | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onCopy | AdaptChildClipboardEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onCopyCapture | AdaptChildClipboardEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onCut | AdaptChildClipboardEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onCutCapture | AdaptChildClipboardEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDoubleClick | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDoubleClickCapture | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDrag | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDragCapture | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDragEnd | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDragEndCapture | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDragEnter | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDragEnterCapture | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDragExit | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDragExitCapture | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDragLeave | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDragLeaveCapture | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDragOver | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDragOverCapture | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDragStart | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDragStartCapture | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDrop | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDropCapture | AdaptChildDragEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDurationChange | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onDurationChangeCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onEmptied | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onEmptiedCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onEncrypted | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onEncryptedCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onEnded | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onEndedCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onError | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Receives errors for the application to handle. |
onErrorCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onFocus | AdaptChildFocusEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onFocusCapture | AdaptChildFocusEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onGotPointerCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onGotPointerCaptureCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onInput | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onInputCapture | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onInvalid | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onInvalidCapture | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onKeyDown | AdaptChildKeyboardEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onKeyDownCapture | AdaptChildKeyboardEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onKeyPress | AdaptChildKeyboardEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onKeyPressCapture | AdaptChildKeyboardEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onKeyUp | AdaptChildKeyboardEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onKeyUpCapture | AdaptChildKeyboardEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onLoad | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onLoadCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onLoadedData | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onLoadedDataCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onLoadedMetadata | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onLoadedMetadataCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onLoadStart | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onLoadStartCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onLostPointerCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onLostPointerCaptureCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onMouseDown | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onMouseDownCapture | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onMouseEnter | ((data: LegendPayload, index: number, event: MouseEvent<HTMLElement, MouseEvent>) => void) | The customized event handler of mouseenter on the items in this group |
onMouseLeave | ((data: LegendPayload, index: number, event: MouseEvent<HTMLElement, MouseEvent>) => void) | The customized event handler of mouseleave on the items in this group |
onMouseMove | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onMouseMoveCapture | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onMouseOut | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onMouseOutCapture | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onMouseOver | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onMouseOverCapture | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onMouseUp | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onMouseUpCapture | AdaptChildMouseEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPaste | AdaptChildClipboardEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPasteCapture | AdaptChildClipboardEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPause | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPauseCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPlay | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPlayCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPlaying | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPlayingCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPointerCancel | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPointerCancelCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPointerDown | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPointerDownCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPointerEnter | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPointerEnterCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPointerLeave | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPointerLeaveCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPointerMove | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPointerMoveCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPointerOut | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPointerOutCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPointerOver | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPointerOverCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPointerUp | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onPointerUpCapture | AdaptChildPointerEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onProgress | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onProgressCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onRateChange | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onRateChangeCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onReset | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onResetCapture | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onScroll | AdaptChildUIEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onScrollCapture | AdaptChildUIEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onSeeked | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onSeekedCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onSeeking | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onSeekingCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onSelect | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Action or selection made by the user. |
onSelectCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onStalled | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onStalledCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onSubmit | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Form submission event. |
onSubmitCapture | AdaptChildFormEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onSuspend | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onSuspendCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onTimeUpdate | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onTimeUpdateCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onTouchCancel | AdaptChildTouchEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onTouchCancelCapture | AdaptChildTouchEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onTouchEnd | AdaptChildTouchEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onTouchEndCapture | AdaptChildTouchEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onTouchMove | AdaptChildTouchEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onTouchMoveCapture | AdaptChildTouchEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onTouchStart | AdaptChildTouchEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onTouchStartCapture | AdaptChildTouchEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onTransitionEnd | AdaptChildTransitionEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onTransitionEndCapture | AdaptChildTransitionEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onVolumeChange | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onVolumeChangeCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onWaiting | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onWaitingCapture | AdaptChildReactEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onWheel | AdaptChildWheelEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
onWheelCapture | AdaptChildWheelEventHandler<LegendPayload, ReactElement<unknown, string | JSXElementConstructor<any>>> | Callback for this event. The signature describes its arguments. |
payloadUniqBy | UniqueOption<LegendPayload> | Configures payloadUniqBy. The type describes the supported values and structure. |
portal | HTMLElement | null | 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 | The position of the legend relative to the chart. If this is defined, it overrides `align` and `verticalAlign`. |
verticalAlign | "top" | "bottom" | "middle" | Configures verticalAlign. The type describes the supported values and structure. |
width | string | number | Output width. |
wrapperStyle | CSSProperties | CSS styles to be applied to the wrapper `div` element. |
ChartLegend · TypeScript
1ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>API generated from @kivora/nextjs 0.2.0View package