New to KendoReactStart a free 30-day trial

Represents the props of the KendoReact ChartTooltip component (see example).

Definition

Package:@progress/kendo-react-charts

Properties

Specifies the background color of the tooltip. Accepts a valid CSS color string, including HEX and RGB.

Specifies the border configuration options.

color?

string

Specifies the text color of the tooltip. Accepts a valid CSS color string, including HEX and RGB.

font?

string

Specifies the font of the tooltip.

format?

string

Specifies the format of the labels.

The value is formatted using the format method from @progress/kendo-intl.

The Area, Bar, Column, Funnel, Pyramid, Line, and Pie are represented by {0} as the value placeholder.

The Bubble chart type uses the following value placeholders: {0} - x value, {1} - y value, {2} - size value, and {3} - category name.

The Scatter and ScatterLine chart types use the following value placeholders: {0} - x value and {1} - y value.

The Candlestick and OHLC chart types use the following value placeholders: {0} - open value, {1} - high value, {2} - low value, {3} - close value, and {4} - category name.

opacity?

number

Specifies the opacity of the tooltip.

Specifies the padding of the tooltip. A numeric value sets all paddings.

render?

(props: TooltipContext) => ReactNode | (props: SharedTooltipContext) => ReactNode

A function that can be used to create a custom tooltip template.

When the shared property is set to true, the function accepts a SharedTooltipContext object as an argument. Otherwise, it accepts a TooltipContext object.

The function should return a React element that represents the custom tooltip content.

shared?

boolean

Determines whether the Chart displays a single tooltip for every category.

visible?

boolean

Determines whether the Chart displays the series tooltip. By default, the series tooltip is not displayed.