Vue Gauges - Subvalue Indicator Text Formatting

This demo shows how to format the text displayed by the subvalue indicator of the textCloud type. For this purpose, the text property of the subvalueIndicator configuration object is utilized.

Backend API

<template> <div> <DxCircularGauge id="gauge" :value="2200" :subvalues="[2700]" > <DxScale :start-value="0" :end-value="3000" :tick-interval="500" > <DxLabel :customize-text="customizeText" /> </DxScale> <DxSubvalueIndicator type="textCloud" > <DxText :format="format" :customize-text="customizeText" /> </DxSubvalueIndicator> <DxExport :enabled="true" /> <DxTitle text="Oven Temperature (includes Recommended)" > <DxFont :size="28" /> </DxTitle> </DxCircularGauge> </div> </template> <script setup lang="ts"> import { DxCircularGauge, DxScale, DxLabel, DxSubvalueIndicator, DxText, DxExport, DxTitle, DxFont, } from 'devextreme-vue/circular-gauge'; const format = { type: 'thousands', precision: 1, }; const customizeText = ({ valueText }: Record<string, any>) => `${valueText} °C`; </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>