Tooltips
The Angular Chart provides three types of tooltips—series tooltips that appear on individual data points, shared tooltips that summarize all series values for a category, and crosshair tooltips that display axes values at the pointer position.
The following example demonstrates all three tooltip types in a sales analytics dashboard. Hover over the charts to see each tooltip in action.
Series Tooltip
The series tooltip appears when the user hovers over a data point. It displays the point value and matches the series color by default. Set the background and border properties to apply a custom tooltip color.
Configuring the Series Tooltip
To enable tooltips for all series, add the kendo-chart-tooltip component. To configure the tooltip for a specific series, use the kendo-chart-series-item-tooltip component. Series-level settings override the global configuration.
The following example enables tooltips globally and applies a custom background to the Services series tooltip.
Customizing the Tooltip Content
The default tooltip content depends on the series type. To customize the text, use the format property or specify an Angular template.
Using the Format Property
Set the format property to apply a format string to the tooltip value. Use the same number format specifiers as in label formatting.
The following example formats the tooltip values as currency. The global tooltip uses {0:c0}, and the Services series overrides it with a prefixed format.
Specifying a Template
Add an ng-template tag as a child of the kendo-chart-tooltip or kendo-chart-series-item-tooltip component. The template receives the TooltipTemplatePoint context. When you use a template on the global kendo-chart-tooltip, apply the kendoChartSeriesTooltipTemplate directive.
The following table lists the most commonly used template context fields:
| Field | Syntax | Type | Description |
|---|---|---|---|
value | let-value="value" | any | The data point value. |
category | let-category="category" | string | Date | number | The point category (Categorical series only). |
categoryIndex | let-categoryIndex="categoryIndex" | number | The index of the category (Categorical series only). |
series | let-series="series" | object | The series options including name, color, and type. |
dataItem | let-dataItem="dataItem" | any | The original data item bound to the point. |
percentage | let-percentage="percentage" | number | The value as a percentage (Donut, Pie, and 100% Stacked charts only). |
The
dataItemfield gives the template access to all properties of the original data object. Bind the series to an array of objects and usedataItemto display custom fields such as images, descriptions, or labels.
The following example renders a custom tooltip with an avatar image and formatted revenue for each sales team member.
Shared Tooltip
The shared tooltip appears when the user hovers over a category and displays a summary of all series values at that point. This tooltip type is available for Categorical charts. To enable it, set the shared property to true on the kendo-chart-tooltip component.
Configuring the Shared Tooltip
To enable the shared tooltip, set the shared property to true on the kendo-chart-tooltip component. The tooltip then displays all series values for the hovered category in a single popup.
The following example enables the shared tooltip on a multi-series line chart.
Customizing the Shared Tooltip
The default shared tooltip shows the category name and a list of series values. To customize the content, add an ng-template with the kendoChartSharedTooltipTemplate directive as a child of kendo-chart-tooltip.
The following table lists the available template context fields:
| Field | Syntax | Type | Description |
|---|---|---|---|
category | let-category="category" | string | Date | number | The hovered category name. |
categoryText | let-categoryText="categoryText" | string | The category name as text. |
points | let-points="points" | TooltipTemplatePoint[] | An array of points for that category. |
nameColumn | let-nameColumn="nameColumn" | boolean | Returns true when the name property of the series is defined. |
colorMarker | let-colorMarker="colorMarker" | boolean | Returns true when one or more series colors are specified and the Chart contains more than one series. |
colSpan | let-colSpan="colSpan" | number | The number of columns covered by the tooltip. Increases by 1 for each of nameColumn and colorMarker when set to true. |
Each item in the
pointsarray is aTooltipTemplatePointobject. Accesspoint.series.name,point.series.color, andpoint.valueto build custom layouts.
The following example renders a custom shared tooltip with the category name, series names, and formatted values.
Crosshair Tooltip
The crosshair tooltips appear next to the axis crosshairs and display the current axis value at the pointer position. Enable the crosshair tooltip through the axis-specific crosshair tooltip component.
In Categorical Charts
For Categorical charts, use the kendo-chart-category-axis-item-crosshair-tooltip and kendo-chart-value-axis-item-crosshair-tooltip components. Set their visible property to true to display the crosshair tooltips.
The following example enables crosshair tooltips on both the category and value axes.
In Scatter Charts
For Scatter charts, use the kendo-chart-x-axis-item-crosshair-tooltip and kendo-chart-y-axis-item-crosshair-tooltip components. Set their visible property to true to display the crosshair tooltips.
The following example enables crosshair tooltips on both the X and Y axes.
Tooltip Popup Settings
The Chart tooltip renders inside a Popup component. Customize the Popup through the popupSettings property on the Chart.
Setting the Popup Container
By default, the tooltip popup is appended to the <body> element. To change this, set the popupSettings.appendTo property to a ViewContainerRef. This ensures the tooltip stays within the bounds of that container and inherits its styles.
The following example appends the tooltip popup to a specific container element.
Applying a CSS Transformation to the Popup
When CSS Transforms are applied to the Chart container, move the Popup to the same container to maintain correct tooltip positioning.
The following example applies a scale transform to the Chart and appends the tooltip popup to the Chart container to keep it aligned with the data points.
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)
- Video Courses
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base