Search results

TooltipSettingsModel API in React Chart API component

Interface for a class TooltipSettings

Properties

border

BorderModel

Options for customizing the tooltip borders.

duration

number

Duration for the Tooltip animation.

enable

boolean

If set to true, enables the tooltip for the data points.

enableAnimation

boolean

If set to true, tooltip will animate while moving from one point to another.

enableMarker

boolean

If set to true, enables the marker in the chart tooltip.

enableTextWrap

boolean

To wrap the tooltip long text based on available space. This is only application for chart tooltip.

fadeOutDuration

number

Duration of the fade-out animation for hiding the Tooltip.

fadeOutMode

FadeOutMode

Fade Out duration for the Tooltip hide.

fill

string

The fill color of the tooltip, specified as a valid CSS color string in hex or rgba format.

format

string

The format for customizing the tooltip content.

The header text for the tooltip. By default, it displays the series name.

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.

shared

boolean

If set to true, a single ToolTip will be displayed for every index.

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.

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.

textStyle

FontModel

Options for customizing the tooltip text appearance.