React Chart - Show and Hide a Tooltip
Each series point allows you to show or hide its tooltip programmatically. For this, call 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.
App.vue
- <template>
- <DxChart ...
- @point-click="onPointClick"
- @point-hover-changed="onPointHoverChanged">
- </DxChart>
- </template>
- <script>
- import DxChart from 'devextreme-vue/chart';
- export default {
- components: {
- DxChart
- },
- methods: {
- onPointClick (e) {
- const point = e.target;
- point.showTooltip();
- },
- onPointHoverChanged (e) {
- const point = e.target;
- if (!point.isHovered()) {
- point.hideTooltip();
- }
- }
- }
- }
- </script>
You can also hide the tooltip regardless of the point to which it belongs. To do this, call the hideTooltip() method of the Chart instance.
App.vue
- <template>
- <DxChart ref="chart">
- </DxChart>
- </template>
- <script>
- import DxChart from 'devextreme-vue/chart';
- export default {
- components: {
- DxChart
- },
- methods: {
- hideTooltip () {
- this.$refs.chart.instance.hideTooltip();
- }
- }
- }
- </script>
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.