DevExtreme React - Handle Tooltip Events

When a tooltip becomes shown or hidden, the Chart 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.

$(function() {
    $("#chartContainer").dxChart({
        // ...
        onTooltipShown: function (e) {
            var point = e.target;
            // Handler of the "tooltipShown" event
        },
        onTooltipHidden: function (e) {
            var point = e.target;
            // Handler of the "tooltipHidden" event
        }
    });
});

<dx-chart
    (onTooltipShown)="onTooltipShown($event)"
    (onTooltipHidden)="onTooltipHidden($event)">
</dx-chart>

import { DxChartModule } 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: [
        // ...
        DxChartModule
    ],
    // ...
})

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
};

$("#chartContainer").dxChart("instance")
    .on("tooltipShown", tooltipShownHandler1)
    .on("tooltipShown", tooltipShownHandler2);

See Also

• Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• Chart API Reference