Recharts

Tooltip

Tooltip is rendered by html nodes.

Parent Components

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 />} />
```
viewBoxObject
The box of viewing area, which has the shape of {x: someVal, y: someVal, width: someVal, height: someVal}, usually calculated internally.
FORMAT:
```
{ x: 0, y: 0, width: 400, height: 400 }
```
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. If set false, the tooltip is hidden, usually calculated internally.
DEFAULT: false
positionObjectoptional
If this field is set, the tooltip position will be fixed and will not move anymore.
FORMAT:
```
{ x: 100, y: 140 }
```
coordinateObject
The coordinate of tooltip position, usually calculated internally.
DEFAULT: { x: 0, y: 0 }
FORMAT:
```
{ x: 100, y: 140 }
```
payloadArray
The source data of the content to be displayed in the tooltip, always calculated internally and cannot be user set.
DEFAULT: []
FORMAT:
```
[{ name: '05-01', value: 12, unit: 'kg' }]
```
labelString | Numberoptional
The label value which is active now, usually calculated internally.
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'