Vue Gauges - Tooltip and Legend

This demo shows how to enable and customize tooltips in the BarGauge component. A tooltip is a small pop-up rectangle that displays the value of the bar that is currently hovered over. To enable the tooltips, set the tooltip.enabled property to true. In this demo, the text displayed by the tooltips is customized.

Backend API

<template> <div> <DxBarGauge id="gauge" :start-value="0" :end-value="200" :values="values" > <DxLabel :visible="false" /> <DxTooltip :enabled="true" :customize-tooltip="customizeTooltip" /> <DxExport :enabled="true" /> <DxTitle text="Average Speed by Racer" > <DxFont :size="28" /> </DxTitle> <DxLegend :visible="true" :customize-text="customizeText" vertical-alignment="bottom" horizontal-alignment="center" /> </DxBarGauge> </div> </template> <script setup lang="ts"> import { DxBarGauge, DxLabel, DxTooltip, DxExport, DxTitle, DxFont, DxLegend, } from 'devextreme-vue/bar-gauge'; const values = [121.4, 135.4, 115.9, 141.1, 127.5]; const getText = (item: any, text: string) => `Racer ${(item.index + 1)} - ${text} km/h`; const customizeTooltip = (arg: Record<string, any>) => ({ text: getText(arg, arg.valueText), }); const customizeText = (arg: Record<string, any>) => getText(arg.item, arg.text); </script> <style> #gauge { height: 440px; width: 100%; } </style>

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>