Tooltip

Displays a floating tooltip with data values

Displays a floating tooltip with data values when hovering over or clicking on chart elements. The Tooltip component renders an HTML element (not SVG) that follows the cursor or attaches to specific data points.

Usage

import { LineChart, Line, Tooltip } from 'recharts';

<LineChart width={500} height={300} data={data}>
  <Line dataKey="uv" stroke="#8884d8" />
  <Tooltip />
</LineChart>

Props

Content

content · ReactElement | function

Renders the content of the tooltip.

This should return HTML elements, not SVG elements.

Options:

• Not set: Uses DefaultTooltipContent component
• ReactElement: Element is cloned with extra props
• function: Called to render HTML elements

Behavior

trigger · 'hover' | 'click' · default: "hover"

Controls when the tooltip appears.

• hover: Shows on mouse enter, hides on mouse leave
• click: Shows after clicking, stays active

shared · boolean

Defines whether the tooltip reacts to the current data point or all data points at the current axis coordinate.

• true: Tooltip appears on top of all items at an axis tick
• false: Tooltip appears on individual items

Different chart types have different defaults and support.

active · boolean

Controls tooltip visibility.

• true: Tooltip is always displayed once an activeIndex is set
• false: Tooltip is never displayed
• undefined: Recharts controls when tooltip displays

Position

position · Partial<Coordinate>

If set, the tooltip displays at the specified position regardless of mouse position.

You can set a single field (x or y) and let the other be calculated automatically.

offset · number | Coordinate · default: "10"

The offset between the tooltip and the mouse cursor position.

• Number: Same offset for both x and y axes
• Coordinate: Different offsets for each axis

allowEscapeViewBox · AllowInDimension · default: "{x: false, y: false}"

Allows the tooltip to extend beyond the viewBox of the chart.

reverseDirection · AllowInDimension · default: "{x: false, y: false}"

Reverses the direction the tooltip appears relative to the cursor.

Styling

wrapperStyle · CSSProperties · default: "{}"

CSS styles applied to the wrapper div element.

contentStyle · CSSProperties · default: "{}"

CSS styles applied to the tooltip content element.

itemStyle · CSSProperties · default: "{}"

CSS styles applied to each tooltip item (li element).

labelStyle · CSSProperties · default: "{}"

CSS styles applied to the tooltip label (p element).

Cursor

cursor · boolean | object | ReactElement | function · default: "true"

Controls the cursor element shown when tooltip is active.

Options:

• false: No cursor
• true: Default cursor
• object: Props for cursor element
• ReactElement: Custom cursor element
• function: Render function for custom cursor

Data formatting

formatter · function

Customizes the value in the tooltip.

Signature: (value, name, item, index, payload) => ReactNode | [ReactNode, ReactNode]

If you return an array, the first entry is the formatted value, the second is the formatted name.

labelFormatter · function

Formats the tooltip label.

Signature: (label: any, payload: TooltipPayload) => ReactNode

separator · string · default: " : "

The separator between name and value.

Filtering

filterNull · boolean · default: "true"

When true, items with null or undefined values are not displayed.

includeHidden · boolean · default: "false"

If true, the tooltip displays information about hidden series.

payloadUniqBy · UniqueOption

Function to determine uniqueness of tooltip items.

itemSorter · TooltipItemSorter · default: "name"

Sorts tooltip items.

Default sorts alphabetically by graphical item name property.

Animation

isAnimationActive · boolean | 'auto' · default: "auto"

If false, animation is disabled.

If “auto”, animation is disabled in SSR and respects the user’s prefers-reduced-motion preference.

animationDuration · number · default: "400"

Duration of animation, in milliseconds.

animationEasing · string · default: "ease"

The type of easing function.

Options: ‘ease’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’, ‘linear’

Portal

portal · HTMLElement | null

If defined, Tooltip uses this element as a target for rendering using React Portal.

If undefined, Tooltip renders inside the recharts-wrapper element.

Advanced

axisId · string | number · default: "0"

The tooltip attaches to the “Tooltip axis” which depends on layout.

Use this to specify which axis the tooltip uses.

defaultIndex · number | string

Default active index for the tooltip.

useTranslate3d · boolean · default: "false"

If true, uses CSS translate3d for positioning.

Other

label · string | number

The label displayed in the tooltip.

Automatically provided by chart context.

payload · TooltipPayload

The array of data items to display.

Automatically provided by chart context.

coordinate · Coordinate

The coordinate where the tooltip should appear.

Automatically provided by chart context.