Vue Chart - Overview

A tooltip is a small pop-up rectangle displaying information about a series point that the user pauses on. By default, the information is the point value, but it is possible to display anything in a tooltip.

DevExtreme HTML5 JavaScript Charts Tooltip

All properties configuring tooltips are collected in the tooltip object. For example, to enable the tooltips, assign true to the enabled property of this object.

App.vue
  • <template>
  • <DxChart ... >
  • <DxTooltip
  • :enabled="true"
  • />
  • </DxChart>
  • </template>
  •  
  • <script>
  • import DxChart, {
  • DxTooltip
  • } from 'devextreme-vue/chart';
  •  
  • export default {
  • components: {
  • DxChart,
  • DxTooltip
  • }
  • }
  • </script>

Properties declared in the tooltip object apply to all tooltips in the Chart. If you want to customize a specific tooltip, assign a function to the customizeTooltip property. This function must return an object with properties for the tooltip that you want to customize.

App.vue
  • <template>
  • <DxChart ... >
  • <DxTooltip
  • :enabled="true"
  • :customize-tooltip="customizeTooltip"
  • color="yellow"
  • />
  • </DxChart>
  • </template>
  •  
  • <script>
  • import DxChart, {
  • DxTooltip
  • } from 'devextreme-vue/chart';
  •  
  • export default {
  • components: {
  • DxChart,
  • DxTooltip
  • },
  • methods: {
  • customizeTooltip (pointInfo) {
  • return pointInfo.value > 100 ? { color: "red" } : { };
  • }
  • }
  • }
  • </script>
See Also