Angular Charts - Tooltip API

You can use tooltip API members to manage tooltip visibility in code. This demo creates a DevExtreme PieChart and disables its default tooltip. When you click a pie segment or select an item in the "Choose Region" box, a showTooltip() method call displays the corresponding tooltip.

www.wikipedia.org

Backend API

<dx-pie-chart id="chart" type="doughnut" [dataSource]="populationData" palette="Soft Pastel" title="The Population of Continents and Regions" (onPointClick)="pointClick($event)" > <dxi-pie-chart-series argumentField="region"></dxi-pie-chart-series> <dxo-pie-chart-tooltip [enabled]="false" format="millions" [customizeTooltip]="customizeTooltip" > </dxo-pie-chart-tooltip> <dxo-pie-chart-size [height]="350"></dxo-pie-chart-size> <dxo-pie-chart-legend [visible]="false"></dxo-pie-chart-legend> </dx-pie-chart> <div class="controls-pane"> <dx-select-box [width]="250" [dataSource]="populationData" [inputAttr]="{ 'aria-label': 'Region' }" displayExpr="region" valueExpr="region" placeholder="Choose region" [value]="selectedRegion" (onValueChanged)="valueChanged($event)" > </dx-select-box> </div>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, ViewChild, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxPieChartModule, DxPieChartComponent, DxPieChartTypes } from 'devextreme-angular/ui/pie-chart'; import { DxSelectBoxModule, DxSelectBoxTypes } from 'devextreme-angular/ui/select-box'; import { Service, Population } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [Service], templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxPieChartModule, DxSelectBoxModule, ], }) export class AppComponent { @ViewChild(DxPieChartComponent, { static: false }) chart: DxPieChartComponent; populationData: Population[]; selectedRegion = ''; constructor(service: Service) { this.populationData = service.getPopulationData(); } pointClick({ target: point }: DxPieChartTypes.PointClickEvent) { point.showTooltip(); this.selectedRegion = point.data.region; } valueChanged({ value }: DxSelectBoxTypes.ValueChangedEvent) { this.chart.instance.getAllSeries()[0].getPointsByArg(value)[0].showTooltip(); } customizeTooltip({ argumentText, valueText }: DxPieChartTypes.PointInfo) { return { text: `${argumentText}<br/>${valueText}`, }; } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep .controls-pane { margin-top: 20px; text-align: center; } ::ng-deep .dx-selectbox { display: inline-block; }

import { Injectable } from '@angular/core'; export class Population { region: string; val: number; } const populationData: Population[] = [{ region: 'Asia', val: 4119626293, }, { region: 'Africa', val: 1012956064, }, { region: 'Northern America', val: 344124520, }, { region: 'Latin America and the Caribbean', val: 590946440, }, { region: 'Europe', val: 727082222, }, { region: 'Oceania', val: 35104756, }]; @Injectable() export class Service { getPopulationData(): Population[] { return populationData; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>