DevExtreme Angular - Overview
A tooltip is a small pop-up rectangle displaying information about a series point that the user pauses on. The information is the point value by default, but it is possible to display anything in a tooltip.
All options configuring tooltips are collected in the tooltip object. For example, to enable the tooltips, assign true to the enabled option of this object.
- <dx-pie-chart ... >
- <dxo-tooltip
- [enabled]="true">
- </dxo-tooltip>
- </dx-pie-chart>
- import { DxPieChartModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- // ...
- }
- @NgModule({
- imports: [
- // ...
- DxPieChartModule
- ],
- // ...
- })
Options declared in the tooltip object apply to all tooltips in the PieChart. If you want to customize a specific tooltip, assign a function to the customizeTooltip option. This function must return an object with options for the tooltip that you want to customize.
- <dx-pie-chart ... >
- <dxo-tooltip
- [enabled]="true"
- color="yellow"
- [customizeTooltip]="customizeTooltip">
- </dxo-tooltip>
- </dx-pie-chart>
- import { DxPieChartModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- // Tooltips of all points with the value more than 100 turn red
- // Other tooltips remain yellow
- customizeTooltip (pointInfo: any) {
- return pointInfo.value > 100 ? { color: 'red' } : { }
- };
- }
- @NgModule({
- imports: [
- // ...
- DxPieChartModule
- ],
- // ...
- })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.