Tooltip

Tooltip is rendered by html nodes.

Properties

• separatorString

  The separator between name and value.

  DEFAULT: ' : '

• offsetNumber

  The offset size between the position of tooltip and the active position.

  DEFAULT: 10

• filterNullBoolean

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

  DEFAULT: true

• itemStyleObject

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

  DEFAULT: {}

  Examples:

  • React Inline style

• wrapperStyleObject

  The style of tooltip wrapper which is a dom element.

  DEFAULT: {}

  Examples:

  • React Inline style

• contentStyleObject

  The style of tooltip content which is a dom element.

  DEFAULT: {}

  Examples:

  • React Inline style

• labelStyleObject

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

  DEFAULT: {}

  Examples:

  • React Inline style

• cursorBoolean | Object | ReactElement

  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

  FORMAT:

  <Tooltip cursor={false} />
  <Tooltip cursor={{ stroke: 'red', strokeWidth: 2 }} />
  <Tooltip cursor={<CustomizedCursor />} />

• allowEscapeViewBoxObjectoptional

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

  DEFAULT: { x: false, y: false }

  FORMAT:

  { x: true }
  { y: true }
  { x: true, y: true }

• activeBoolean

  If set true, the tooltip is displayed even after onMouseLeave. If set false, the tooltip is always hidden.

  DEFAULT: false

• positionObjectoptional

  If this field is set, the tooltip position will be fixed and will not move anymore.

  FORMAT:

  { x: 100, y: 140 }

• contentReactElement | Functionoptional

  If set a React element, the option is the custom react element of rendering tooltip. If set a function, the function will be called to render tooltip content.

  FORMAT:

  <Tooltip content={<CustomizedTooltip external={external} />} />
  <Tooltip content={renderTooltip} />

  Examples:

  • Customize tooltip content

• formatterFunctionoptional

  The formatter function of value in tooltip. If you return an array, the first entry will be the formatted "value", and the second entry will be the formatted "name"

  FORMAT:

  (value, name, props) => "formatted value"
  (value, name, props) => ["formatted value", "formatted name"]

• labelFormatterFunctionoptional

  The formatter function of label in tooltip.

• itemSorterFunction

  Sort function of payload

  DEFAULT: () => -1

• sharedBooleanoptional

  If true, tooltip will appear on top of all bars on an axis tick. If false, tooltip will appear on individual bars. Currently only supported in BarChart and RadialBarChart.

  DEFAULT: true

• isAnimationActiveBoolean

  If set false, animation of tooltip will be disabled.

  DEFAULT: true in CSR, and false in SSR

• animationDurationNumber

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

  DEFAULT: 1500

• animationEasing'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'

  The type of easing function.

  DEFAULT: 'ease'