Your search did not match any results.
Circular Gauge

Subvalue Indicator Text Formatting

Documentation

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

Apply
Reset
<template> <div> <dx-circular-gauge id="gauge" :value="2200" :subvalues="[2700]" > <dx-scale :start-value="0" :end-value="3000" :tick-interval="500" > <dx-label :customize-text="customizeText" /> </dx-scale> <dx-subvalue-indicator type="textCloud" > <dx-text :format="format" :customize-text="customizeText" /> </dx-subvalue-indicator> <dx-export :enabled="true" /> <dx-title text="Oven Temperature (includes Recommended)" > <dx-font :size="28" /> </dx-title> </dx-circular-gauge> </div> </template> <script> import { DxCircularGauge, DxScale, DxLabel, DxSubvalueIndicator, DxText, DxExport, DxTitle, DxFont } from 'devextreme-vue/circular-gauge'; export default { components: { DxCircularGauge, DxScale, DxLabel, DxSubvalueIndicator, DxText, DxExport, DxTitle, DxFont }, data() { return { format: { type: 'thousands', precision: 1 } }; }, methods: { customizeText({ valueText }) { return `${valueText} °C`; } } }; </script> <style scoped> #gauge { height: 440px; width: 100%; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
<!DOCTYPE html> <html> <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=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/19.2.3/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.5.16/dist/vue.esm.browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme-vue': 'npm:devextreme-vue@19.2', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });