Tooltips
The 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.
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 to override an option for a specific series.
@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-tooltip>
</kendo-chart-tooltip>
<kendo-chart-series>
<kendo-chart-series-item [data]="[1, 2, 3]">
</kendo-chart-series-item>
<kendo-chart-series-item [data]="[1, 2, 3]">
<kendo-chart-series-item-tooltip background="green">
</kendo-chart-series-item-tooltip>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
}
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.
@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-tooltip format="Default Content {0}">
</kendo-chart-tooltip>
<kendo-chart-series>
<kendo-chart-series-item [data]="[1, 2, 3]">
</kendo-chart-series-item>
<kendo-chart-series-item [data]="[1, 2, 3]">
<kendo-chart-series-item-tooltip format="Series 1 value: {0}">
</kendo-chart-series-item-tooltip>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
}
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.
@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-tooltip>
<ng-template kendoChartSeriesTooltipTemplate let-value="value">
Default Content {{ value }}
</ng-template>
</kendo-chart-tooltip>
<kendo-chart-series>
<kendo-chart-series-item [data]="[1, 2, 3]">
</kendo-chart-series-item>
<kendo-chart-series-item [data]="[1, 2, 3]">
<kendo-chart-series-item-tooltip>
<ng-template let-value="value">
Series 1 value: {{ value }}
</ng-template>
</kendo-chart-series-item-tooltip>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
}
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.
@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-tooltip [shared]="true">
</kendo-chart-tooltip>
<kendo-chart-category-axis>
<kendo-chart-category-axis-item [categories]="['A', 'B', 'C']">
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
<kendo-chart-series>
<kendo-chart-series-item [data]="[1, 2, 3]">
</kendo-chart-series-item>
<kendo-chart-series-item [data]="[1, 2, 3]">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
}
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 theTooltipTemplatePoints
category.
@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-tooltip [shared]="true">
<ng-template kendoChartSharedTooltipTemplate let-category="category" let-points="points">
<div> {{ category }} </div>
<div *ngFor="let point of points">
{{ point.series.name }} : {{ point.value }}
</div>
</ng-template>
</kendo-chart-tooltip>
<kendo-chart-category-axis>
<kendo-chart-category-axis-item [categories]="['A', 'B', 'C']">
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
<kendo-chart-series>
<kendo-chart-series-item name="A" [data]="[1, 2, 3]">
</kendo-chart-series-item>
<kendo-chart-series-item name="B" [data]="[1, 2, 3]">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
}
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.
@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-category-axis>
<kendo-chart-category-axis-item [categories]="['A', 'B', 'C']">
<kendo-chart-category-axis-item-crosshair>
<kendo-chart-category-axis-item-crosshair-tooltip>
</kendo-chart-category-axis-item-crosshair-tooltip>
</kendo-chart-category-axis-item-crosshair>
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
<kendo-chart-value-axis>
<kendo-chart-value-axis-item>
<kendo-chart-value-axis-item-crosshair>
<kendo-chart-value-axis-item-crosshair-tooltip>
</kendo-chart-value-axis-item-crosshair-tooltip>
</kendo-chart-value-axis-item-crosshair>
</kendo-chart-value-axis-item>
</kendo-chart-value-axis>
<kendo-chart-series>
<kendo-chart-series-item [data]="[1, 2, 3]">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
}
Using in Scatter Charts
The following example demonstrates how to enable the crosshair tooltips for the Scatter charts.
@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-x-axis>
<kendo-chart-x-axis-item>
<kendo-chart-x-axis-item-crosshair>
<kendo-chart-x-axis-item-crosshair-tooltip>
</kendo-chart-x-axis-item-crosshair-tooltip>
</kendo-chart-x-axis-item-crosshair>
</kendo-chart-x-axis-item>
</kendo-chart-x-axis>
<kendo-chart-y-axis>
<kendo-chart-y-axis-item>
<kendo-chart-y-axis-item-crosshair>
<kendo-chart-y-axis-item-crosshair-tooltip>
</kendo-chart-y-axis-item-crosshair-tooltip>
</kendo-chart-y-axis-item-crosshair>
</kendo-chart-y-axis-item>
</kendo-chart-y-axis>
<kendo-chart-series>
<kendo-chart-series-item type="scatter" [data]="[[1, 1], [2, 2], [3, 3]]">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
}