TooltipSettings
23 Sep 20252 minutes to read
Configures the ToolTips in the chart.
Properties
border BorderModel
Options for customizing the tooltip borders.
duration number
Duration for the Tooltip animation.
Defaults to 300
enable boolean
If set to true, enables the tooltip for the data points.
Defaults to false.
enableAnimation boolean
If set to true, tooltip will animate while moving from one point to another.
Defaults to true.
enableMarker boolean
If set to true, enables the marker in the chart tooltip.
Defaults to true.
enableTextWrap boolean
To wrap the tooltip long text based on available space.
This is only application for chart tooltip.
Defaults to false
fadeOutDuration number
Duration of the fade-out animation for hiding the Tooltip.
Defaults to 1000
fadeOutMode FadeOutMode
Fade Out duration for the Tooltip hide.
Defaults to Move
fill string
The fill color of the tooltip, specified as a valid CSS color string in hex or rgba format.
Defaults to null
format string
The format for customizing the tooltip content.
Defaults to null.
header string
The header text for the tooltip. By default, it displays the series name.
Defaults to null
location LocationModel
Specifies the location of the tooltip, relative to the chart.
If x is 20, tooltip moves by 20 pixels to the right of the chart
<div id='Chart'></div>let chart: Chart = new Chart({
...
tooltipSettings: {
enable: true,
location: { x: 100, y: 150 },
},
...
});
chart.appendTo('#Chart');opacity number
The opacity of the tooltip, expressed as a numerical value.
Defaults to null
shared boolean
If set to true, a single ToolTip will be displayed for every index.
Defaults to false.
showNearestPoint boolean
By default, the nearest points will be included in the shared tooltip; however, you can set it to false to exclude the nearest value from the tooltip.
Defaults to true
template string|Function
A custom template used to format the Tooltip content. You can use ${x} and ${y} as placeholder text to display the corresponding data points.
Defaults to null.
textStyle FontModel
Options for customizing the tooltip text appearance.