Tooltip

Props

• activebooleanoptional

  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.

  Examples:

  • Pie Chart With Needle

• allowEscapeViewBoxAllowInDimensionoptional

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

  DEFAULT: {"x":false,"y":false}

• animationDurationnumberoptional

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

  DEFAULT: 400

• animationEasing"ease" | "ease-in" | "ease-in-out" | "ease-out" | "linear"optional

  The type of easing function.

  DEFAULT: "ease"

• axisIdnumber | stringoptional

  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.

  DEFAULT: 0

  Examples:

  • Multiple X Axes

• contentFunction | ReactNodeoptional

  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.

  Examples:

  • Example with custom content
  • Percent Area Chart
  • Candlestick
  • Banded Chart
  • Target Price Chart with active Label
  • Bubble Chart
  • Custom Active Shape Pie Chart
  • Pie Chart With Needle

• contentStyleReact.CSSPropertiesoptional

  The style of tooltip content which is a dom element.

  DEFAULT: {}

• cursorReact.SVGProps<SVGElement> | ReactNode | false | trueoptional

  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.

  DEFAULT: true

  Examples:

  • Custom Shape Bar Chart
  • Simple Scatter Chart
  • Three Dim Scatter Chart
  • Joint Line Scatter Chart
  • Bubble Chart
  • Scatter Chart With Labels
  • Multiple Y Axes Scatter Chart
  • Scatter Chart With Cells

• defaultIndexnull | number | stringoptional

  Examples:

  • Ranged Stacked Bar Chart
  • Population Pyramid
  • Timeline
  • Candlestick
  • Target Price Chart with active Label
  • Simple Scatter Chart
  • Three Dim Scatter Chart
  • Joint Line Scatter Chart
  • Bubble Chart
  • Scatter Chart With Labels

• filterNullbooleanoptional

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

  DEFAULT: true

• formatterFormatter<TValue, TName>optional

  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"

  Examples:

  • Population Pyramid

• includeHiddenbooleanoptional

  If true, the tooltip will display information about hidden series. Defaults to false. Interacting with the hide property of Area, Bar, Line, Scatter.

  DEFAULT: false

• isAnimationActive"auto" | false | trueoptional

  If set false, animation of tooltip will be disabled. If set "auto", the animation will be disabled in SSR and enabled in browser.

  DEFAULT: "auto"

  Examples:

  • Custom Content Of Tooltip

• itemSorter"dataKey" | "name" | "value" | Functionoptional

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

  DEFAULT: "name"

• itemStyleReact.CSSPropertiesoptional

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

  DEFAULT: {}

• labelClassNamestringoptional

• labelFormatterFunctionoptional

  The formatter function of label in tooltip.

• labelStyleReact.CSSPropertiesoptional

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

  DEFAULT: {}

• offsetCoordinate | numberoptional

  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)

  DEFAULT: 10

• payloadUniqByUniqueFunc<TooltipPayloadEntry> | false | trueoptional

• portalHTMLElement | nulloptional

  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.

• positionPartial<Coordinate>optional

  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.

• reverseDirectionAllowInDimensionoptional

  DEFAULT: {"x":false,"y":false}

• separatorstringoptional

  The separator between name and value.

  DEFAULT: " : "

• sharedbooleanoptional

  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.

  Examples:

  • Tooltip event type and shared prop wiki page
  • Timeline

• trigger"click" | "hover"optional

  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.

  DEFAULT: "hover"

• useTranslate3dbooleanoptional

  DEFAULT: false

• wrapperClassNamestringoptional

• wrapperStyleReact.CSSPropertiesoptional

  CSS styles to be applied to the wrapper div element.

  DEFAULT: {}

  Examples:

  • Bubble Chart