ChartTooltipProps

Represents the configuration model for tooltips in charts.

Props

The following table outlines the props for the ChartTooltipProps:

Name	Type	Default	Description
border	ChartBorderProps	{ color: '', width: 1, dashArray: '' }	Customizes the tooltip border, including color and width.
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	null	Sets the background color of the tooltip. Accepts any valid CSS color value (hex, RGB, named colors).
format	string	null	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	null	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	null	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: '', fontStyle: 'Normal', fontWeight: 'Normal', opacity: 1 }	Defines the font styling for the tooltip text, including font family, size, weight, and color.