DevExtreme React - Handle Tooltip Events
When a tooltip becomes shown or hidden, the PieChart fires the tooltipShown or tooltipHidden event that you can handle with a function. If the handling function is not going to be changed during the lifetime of the widget, assign it to the onTooltipShown or onTooltipHidden option respectively, when you configure the widget.
jQuery
$(function() { $("#pieChartContainer").dxPieChart({ // ... onTooltipShown: function (e) { var point = e.target; // Handler of the "tooltipShown" event }, onTooltipHidden: function (e) { var point = e.target; // Handler of the "tooltipHidden" event } }); });
Angular
<dx-pie-chart ... (onTooltipShown)="onTooltipShown($event)" (onTooltipHidden)="onTooltipHidden($event)"> </dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular"; // ... export class AppComponent { onTooltipShown (e) { let point = e.target; // Handler of the "tooltipShown" event }, onTooltipHidden (e) { let point = e.target; // Handler of the "tooltipHidden" event } } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
If you are going to change the event handlers at runtime or if you need to attach several handlers to a single event, subscribe to this event using the on(eventName, eventHandler) method. This approach is more typical of jQuery.
var tooltipShownHandler1 = function (e) { var point = e.target; // First handler of the "tooltipShown" event }; var tooltipShownHandler2 = function (e) { var point = e.target; // Second handler of the "tooltipShown" event }; $("#pieChartContainer").dxPieChart("instance") .on("tooltipShown", tooltipShownHandler1) .on("tooltipShown", tooltipShownHandler2);
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.