Recharts

Tooltip

Tooltip 是基于 HTML 实现的。

父组件

Properties

separatorString
name 和 value 之间的分隔符。
默认值：' : '
offsetNumber
Tooltip 与当前“游标”的偏移量。
默认值：10
filterNullBoolean
当tooltip内容中的某条数据的值为 null 或者 undefined 时，不展示该条数据
默认值：true
itemStyleObject
Tooltip 中每个项目（使用 li 节点渲染的）的样式。
默认值：{}
示例：
- React Inline style
wrapperStyleObject
Tooltip 最外层节点（div）的样式。
默认值：{}
示例：
- React Inline style
contentStyleObject
Tooltip 内部展示的内容 (div) 的样式。
默认值：{}
示例：
- React Inline style
labelStyleObject
类目文字标签（使用 <p /> 渲染）的样式。
默认值：{}
示例：
- React Inline style
cursorBoolean | Object | ReactElement
游标相关配置，一般在类目图表展示 Tooltip 的时候，会渲染游标来标识相应的类目。如果值为 false，不渲染游标。当值为对象类型，会被解析为游标的属性，注意游标也是用 svg 元素渲染的。如果值为 React element，会克隆这个元素来展示自定义的游标。
默认值：true
格式：
```
<Tooltip cursor={false} />
<Tooltip cursor={{ stroke: 'red', strokeWidth: 2 }} />
<Tooltip cursor={<CustomizedCursor />} />
```
viewBoxObject
图表的可视区域。通常通过 x、y、width、height 来描述。
格式：
```
{ x: 0, y: 0, width: 400, height: 400 }
```
allowEscapeViewBoxObjectoptional
此选项允许工具提示扩展到图表本身的viewBox之外。
默认值：{ x: false, y: false }
格式：
```
{ x: true }
{ y: true }
{ x: true, y: true }
```
activeBoolean
是否处于激活状态。如果值为 true, tooltip 会显示出来。如果值为 false, tooltip 会被隐藏，这个值一般是图表内部控制的。
默认值：false
positionObjectoptional
如果设置了此字段，则工具提示位置将固定不变，并且将不再移动。
格式：
```
{ x: 100, y: 140 }
```
coordinateObject
用来描述位置的坐标，也是图表内部计算的值。
默认值：{ x: 0, y: 0 }
格式：
```
{ x: 100, y: 140 }
```
payloadArray
Tooltip 展示内容的源数据，通常是图表内部计算的。
默认值：[]
格式：
```
[{ name: '05-01', value: 12, unit: 'kg' }]
```
labelString | Numberoptional
当 Tooltip 显示出来的时候，表示类目文字标签。
contentReactElement | Functionoptional
定制 Tooltip 展示的内容。如果值为 React element，会克隆这个元素来渲染 Tooltip 的内容。如果值为函数，会调用这个函数来生成 Tooltip 的内容。
格式：
```
<Tooltip content={<CustomizedTooltip external={external} />} />
<Tooltip content={renderTooltip} />
```
示例：
- Customize tooltip content
formatterFunctionoptional
每个项目中“数值”的格式化函数。如果函数返回值为数组格式，第一个元素是格式化后的“数值”，第二个元素是格式化后的“名称”
格式：
```
(value, name, props) => "formatted value"
(value, name, props) => ["formatted value", "formatted name"]
```
labelFormatterFunctionoptional
类目文字标签的格式化函数。
itemSorterFunction
项目排序函数。
默认值：() => -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.
默认值：true
isAnimationActiveBoolean
当值为 false，不开启动画。
默认值：true in CSR, and false in SSR
animationDurationNumber
声明动画的运行时长，单位为毫秒。
默认值：1500
animationEasing'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
动画缓动函数的类型。
默认值：'ease'

<Recharts />

API

图表类型

通用组件

笛卡尔坐标系组件

极坐标系组件

图形

Tooltip

父组件

Properties