Tooltips
The Kendo UI for Vue Native Chart supports three types of tooltips.
The Chart tooltip types are:
- Series tooltip—A tooltip displayed for the hovered chart point.
- Shared tooltip—A tooltip displayed for the hovered chart category.
- Crosshair tooltip—A tooltip displayed for the axes crosshairs.
Series Tooltip
The series tooltip is displayed when the user hovers over a point and is used to show the point values or any additional information. By default, the color of the tooltip matches the color of the point to help associate the tooltip with that point. It is also possible to set it to a specific color by using the background and border options.
Tooltip configuration
To enable and configure the tooltip for all series, use the ChartTooltip component. To enable and configure the tooltip for a specific series, use the ChartSeriesItemTooltip component.
The following example demonstrates how to configure the tooltip globally and to override an option for a specific series.
Customizing Content
By default, the content of the tooltip is determined based on the point type. To customize the tooltip content, either:
Using the format Option
The following example demonstrates how to customize the content of the tooltip through the format configuration.
Specifying a Template
To specify a template, use the render prop of the ChartTooltip or ChartSeriesItemTooltip components.
The callback passed to the render props receives a single parameter - the context of the tooltip. When the render prop is defined on the ChartTooltip component, the context can be either of type SharedTooltipContext or TooltipContext depending on whether the tooltip is shared or not. The type of context when defined on the ChartSeriesItemTooltip is always of type TooltipContext.
The following example demonstrates how to customize the content by using a render prop.
Shared Tooltip
The shared tooltip is displayed when the user hovers over a category and is used for Categorical charts. The shared tooltip shows a summary of all points in the hovered category. To enable the shared tooltip, use the shared option of the ChartTooltip component.
The following example demonstrates how to enable the shared tooltip.
Crosshair Tooltip
The crosshair tooltips are displayed next to the axes crosshairs and show the current value of the crosshairs. To enable the crosshair tooltip, use the specific axis crosshair-tooltip component.
Using in Categorical Charts
The following example demonstrates how to enable the crosshair tooltips for the Categorical charts.
Using in Scatter Charts
The following example demonstrates how to enable the crosshair tooltips for the Scatter charts.