JavaScript/jQuery PieChart - Show and Hide a Tooltip
Each series point allows you to show or hide its tooltip programmatically by calling the showTooltip() or hideTooltip() method of the Point object. You can access this object with the API methods or in the handlers of the point events, such as pointClick, pointHoverChanged, etc. The latter is demonstrated in the following code.
jQuery
JavaScript
$(function() { $("#pieChartContainer").dxPieChart({ // ... // Shows the tooltip only when a user clicks a series point onPointClick: function (e) { var point = e.target; point.showTooltip(); }, // Hides the tooltip once the user moves the pointer away from the series point onPointHoverChanged: function (e) { var point = e.target; if (!point.isHovered()) { point.hideTooltip(); } } }); });
Angular
HTML
TypeScript
<dx-pie-chart ... (onPointClick)="onPointClick($event)" (onPointHoverChanged)="onPointHoverChanged($event)"> </dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular"; // ... export class AppComponent { // Shows the tooltip only when a user clicks a series point onPointClick (e) { const point = e.target; point.showTooltip(); }, // Hides the tooltip once the user moves the pointer away from the series point onPointHoverChanged (e) { const point = e.target; if (!point.isHovered()) { point.hideTooltip(); } } } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
App.vue
<template> <DxPieChart ... @point-click="onPointClick" @point-hover-changed="onPointHoverChanged"> </DxPieChart> </template> <script> import DxPieChart from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart }, methods: { // Shows the tooltip only when a user clicks a series point onPointClick(e) { const point = e.target; point.showTooltip(); }, // Hides the tooltip once the user moves the pointer away from the series point onPointHoverChanged(e) { const point = e.target; if (!point.isHovered()) { point.hideTooltip(); } } } } </script>
React
App.js
import React from 'react'; import PieChart from 'devextreme-react/pie-chart'; class App extends React.Component { render() { return ( <PieChart ... onPointClick={onPointClick} onPointHoverChanged={onPointHoverChanged}> </PieChart> ); } } // Shows the tooltip only when a user clicks a series point function onPointClick(e) { const point = e.target; point.showTooltip(); } // Hides the tooltip once the user moves the pointer away from the series point function onPointHoverChanged(e) { const point = e.target; if (!point.isHovered()) { point.hideTooltip(); } }
You can also hide the tooltip regardless of the point to which it belongs by calling the hideTooltip() method of the PieChart instance.
jQuery
JavaScript
$("#pieChartContainer").dxPieChart("hideTooltip");
Angular
TypeScript
import { ..., ViewChild } from "@angular/core"; import { DxPieChartModule, DxPieChartComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxPieChartComponent, { static: false }) pieChart: DxPieChartComponent; // Prior to Angular 8 // @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent; hideTooltip () { this.pieChart.instance.hideTooltip(); }; } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
App.vue
<template> <DxPieChart ... ref="pieChart"> </DxPieChart> </template> <script> import DxPieChart from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart }, methods: { hideTooltip () { this.$refs.pieChart.instance.hideTooltip(); } } } </script>
React
App.js
import React from 'react'; import PieChart from 'devextreme-react/pie-chart'; class App extends React.Component { constructor(props) { super(props); this.pieChartRef = React.createRef(); this.hideTooltip = () => { this.pieChart.hideTooltip(); }; } render() { return ( <PieChart ... ref={this.pieChartRef}> </PieChart> ); } get pieChart() { return this.pieChartRef.current.instance(); } }
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.