ChartTooltipProps

Represents the configuration model for tooltips in charts.

Props

The following table outlines the props for the ChartTooltipProps:

NameTypeDefaultDescription
border
ChartBorderProps
{ color: '', width: 1, dashArray: '' }

Customizes the tooltip border, including color and width.

distance
number
0

Specifies the distance, in pixels, between the tooltip and the associated data point. This value is applied only when followPointer is set to false.When followPointer is enabled, this property has no effect.

duration
number
300

Sets the duration of tooltip animations in milliseconds.

enable
boolean
false

When set to true, tooltips are displayed when hovering over data points.

enableAnimation
boolean
true

When set to true, enables smooth animation when the tooltip transitions between data points.

fadeOutDuration
number
1000

Controls how long the fade-out animation lasts when hiding the tooltip.

fadeOutMode
FadeOutMode
'Move'

Specifies the fade-out animation mode when hiding the tooltip. Available options:

  • Click: The tooltip is removed when the user clicks on the chart.
  • Move: The tooltip fades out after a short delay when the pointer moves away.
fill
string
''

Sets the background color of the tooltip. Accepts any valid CSS color value (hex, RGB, named colors).

followPointer
boolean
false

Specifies whether the tooltip should follow the pointer position dynamically. When set to true, the tooltip position is updated based on the current mouse or touch coordinates instead of the data point location. This property is ignored if an explicit location is provided for the tooltip.

format
string
''

Defines a custom format string for tooltip content displayed when hovering over data points. The format can include placeholder tokens that will be replaced with actual values:

  • ${point.x} - Represents the x-value of the data point.
  • ${point.y} - Represents the y-value of the data point.
  • ${series.name} - Represents the name of the data series the point belongs to.
formatter
(text: string | string[]) => string | string[] | boolean
null

A callback function that allows for custom rendering of chart tooltips. This function is invoked for each tooltip and receives its properties as an argument. Available arguments:

  • text: The content of the tooltip, which can be a string or an array of strings.
headerText
string
''

Customizes the header text displayed at the top of the tooltip. By default, displays the series name.

location
ChartLocationProps
{ x: 0, y: 0 }

Specifies a fixed position for the tooltip relative to the chart. For example, x: 20 positions the tooltip 20 pixels to the right.

opacity
number
1

Controls the transparency level of the tooltip. Values range from 0 (fully transparent) to 1 (fully opaque).

shared
boolean
false

When set to true, displays a single tooltip showing all data points that share the same x-value.

showHeaderLine
boolean
false

When set to true, displays a horizontal line separating the tooltip header from its content.

showMarker
boolean
true

When set to true, displays colored markers within the tooltip to indicate the corresponding series for each data point.

showNearestPoint
boolean
true

When set to true, includes the nearest data point in the shared tooltip.

showNearestTooltip
boolean
true

When set to true, displays a tooltip for the data point nearest to the cursor. Applicable for line, area, spline, and spline area series.

template
((data: ChartTooltipTemplateProps) => JSX.Element | null)
null

Custom template function for rendering the tooltip content. This function receives the data point properties and returns a JSX element to access the data point values.

textStyle
ChartFontProps
{ color: '', fontFamily: '', fontSize: '', fontStyle: '', fontWeight: '', opacity: 1 }

Defines the font styling for the tooltip text, including font family, size, weight, and color.