Tooltips
The Angular Chart supports three types of tooltips—on the series level, a shared tooltip for all series per category, and on the crosshair.
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.
Series Tooltip Configuration
To enable and configure the tooltip for all series, use the kendo-chart-tooltip component. To enable and configure the tooltip for a specific series, use the kendo-chart-series-item-tooltip component.
The following example demonstrates how to configure the tooltip globally and override an option for a specific series.
Series Tooltip Customization
By default, the content of the tooltip is determined based on the point type. To customize the tooltip content, either:
- Use the format option, or
- Specify a template.
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, add a template tag as a child of the kendo-chart-tooltip or kendo-chart-series-item-tooltip components. The template is passed to the TooltipTemplatePoint. If you add the template to the kendo-chart-tooltip component, use the kendoChartSeriesTooltipTemplate directive on the template to indicate that the template is used for the series.
The following example demonstrates how to customize the content by using a template.
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 kendo-chart-tooltip component.
Shared Tooltip Configuration
The following example demonstrates how to enable the shared tooltip.
Shared Tooltip Customization
By default, the shared tooltip displays the category as a title and an item for each point in that category. To customize the content that is displayed for the points of a specific series, use the format option, or the template for the series. To customize the entire content, add a template tag with the kendoChartSharedTooltipTemplate directive as a child of the kendo-chart-tooltip component.
The available fields in the template are:
category—The hovered category.points—An array of theTooltipTemplatePointscategory.
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.
In Categorical Charts
The following example demonstrates how to enable the crosshair tooltips for the Categorical charts.
In Scatter Charts
The following example demonstrates how to enable the crosshair tooltips for the Scatter charts.
Tooltip Popup Settings
The Chart tooltip uses a Popup component for its rendering. It is possible to customize the Popup by directly using the popupSettings.
Setting the Popup Container
The following example demonstrates how to append the tooltip to a specified container.
Applying a CSS Transformation to the Popup
To use CSS Transforms on the Chart, you have to move the Popup to the same container as the Chart.
The following example demonstrates how to position the popup in a container with CSS transformations.
Support and Learning Resources
- Chart Tooltips Homepage
- Getting Started with the Kendo UI for Angular Chart
- API Reference of the Chart
- Axes
- Chart Area
- Crosshairs
- Error Bars
- Labels
- Legend
- Notes
- Panes
- Plot Area
- Plot Bands
- Selection
- Series
- Title
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Virtual Classroom (Training Courses for Registered Users)
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base
