Circle V2 API Docs
    Preparing search index...

    Interface TooltipProps

    interface TooltipProps {
        accessibilityLayer?: boolean;
        active?: boolean;
        activeIndex?: TooltipIndex;
        allowEscapeViewBox?: AllowInDimension;
        animationDuration?: number;
        animationEasing?:
            | "ease"
            | "ease-in"
            | "ease-in-out"
            | "ease-out"
            | "linear";
        axisId?: string
        | number;
        content?: ContentType<string | number, string>;
        contentStyle?: CSSProperties;
        coordinate?: Coordinate;
        cursor?: CursorDefinition;
        defaultIndex?: number | TooltipIndex;
        filterNull?: boolean;
        fitContent?: boolean;
        formatter?: (value: any, name: any) => ReactNode | [ReactNode, ReactNode];
        hideIndicator?: boolean;
        hideLabel?: boolean;
        hideSeriesLabel?: boolean;
        includeHidden?: boolean;
        indicator?: "line" | "dashed" | "dot";
        isAnimationActive?: boolean | "auto";
        itemSorter?: TooltipItemSorter<string | number, string> & TooltipItemSorter;
        itemStyle?: CSSProperties;
        label?: string | number;
        labelClassName?: string;
        labelFormatter?: (
            label: ReactNode,
            payload: readonly Payload<string | number, string>[],
        ) => ReactNode & (label: any, payload: TooltipPayload) => ReactNode;
        labelStyle?: CSSProperties;
        nameKey?: string;
        offset?: number | Coordinate;
        payload?: TooltipPayload;
        payloadUniqBy?: UniqueOption<TooltipPayloadEntry>;
        portal?: HTMLElement | null;
        position?: Partial<Coordinate>;
        render?: (item: Payload<string, string>) => ReactNode;
        reverseDirection?: AllowInDimension;
        separator?: string;
        shared?: boolean;
        showTotal?: boolean;
        trigger?: TooltipTrigger;
        useTranslate3d?: boolean;
        wrapperClassName?: string;
        wrapperStyle?: CSSProperties;
    }

    Hierarchy

    Index

    Properties

    accessibilityLayer? active? activeIndex? allowEscapeViewBox? animationDuration? animationEasing? axisId? content? contentStyle? coordinate? cursor? defaultIndex? filterNull? fitContent? formatter? hideIndicator? hideLabel? hideSeriesLabel? includeHidden? indicator? isAnimationActive? itemSorter? itemStyle? label? labelClassName? labelFormatter? labelStyle? nameKey? offset? payload? payloadUniqBy? portal? position? render? reverseDirection? separator? shared? showTotal? trigger? useTranslate3d? wrapperClassName? wrapperStyle?

    Properties

    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 undefined, Recharts will control when the Tooltip displays. This includes mouse and keyboard controls.

    activeIndex?: TooltipIndex
    allowEscapeViewBox?: AllowInDimension

    This option allows the tooltip to extend beyond the viewBox of the chart itself.

    {"x":false,"y":false}
    animationDuration?: number

    Specifies the duration of animation, the unit of this option is ms.

    400
    animationEasing?: "ease" | "ease-in" | "ease-in-out" | "ease-out" | "linear"

    The type of easing function.

    ease
    axisId?: string | number

    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.

    0

    Optionalcontent

    content?: ContentType<string | number, string>

    Renders the content of the tooltip.

    This should return HTML elements, not SVG elements.

    • If not set, the 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.

    Example with custom content

    contentStyle?: CSSProperties

    The style of tooltip content which is a dom element.

    {}
    coordinate?: Coordinate
    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.

    true
    defaultIndex?: number | TooltipIndex
    filterNull?: boolean

    When an item of the payload has value null or undefined, this item won't be displayed.

    true
    fitContent?: boolean
    formatter?: (value: any, name: any) => 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"

    hideIndicator?: boolean
    hideLabel?: boolean
    hideSeriesLabel?: boolean
    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.

    false
    indicator?: "line" | "dashed" | "dot"
    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.

    auto
    itemSorter?: TooltipItemSorter<string | number, string> & TooltipItemSorter

    Sorts tooltip items. Defaults to 'name' which means it sorts alphabetically by graphical item name property.

    name
    itemStyle?: CSSProperties

    The style of default tooltip content item which is a li element.

    {}
    label?: string | number
    labelClassName?: string
    labelFormatter?: (
        label: ReactNode,
        payload: readonly Payload<string | number, string>[],
    ) => ReactNode & (label: any, payload: TooltipPayload) => ReactNode

    The formatter function of label in tooltip.

    labelStyle?: CSSProperties

    The style of default tooltip label which is a p element.

    {}
    nameKey?: string
    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)

    10
    payload?: TooltipPayload
    payloadUniqBy?: UniqueOption<TooltipPayloadEntry>
    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.

    render?: (item: Payload<string, string>) => ReactNode
    reverseDirection?: AllowInDimension
    {"x":false,"y":false}
    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.

    Tooltip event type and shared prop wiki page

    showTotal?: boolean
    trigger?: TooltipTrigger

    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.

    hover
    useTranslate3d?: boolean
    false
    wrapperClassName?: string
    wrapperStyle?: CSSProperties

    CSS styles to be applied to the wrapper div element.

    Settings

    Member Visibility

    On This Page

    Properties