Vue Gauges - Overview

DevExtreme Vue Gauge controls help you visualize data and create dashboards. Our library includes three gauge types: radial bar gauges, circular scale gauges, and linear gauges.

This demo displays a simple dashboard with a few highly customized gauges.

Review other demos in this section to explore gauge features such as geometry customization, palettes, tooltips, and custom label display.

You can use Vue syntax and techniques to instantiate and configure the gauges or handle their events. In addition, the components support prop validation. Find out more about DevExtreme Vue components.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<template> <div id="gauge-demo"> <div id="gauge-container"> <div class="left-section"> <GaugeIndicator :value="speedValue / 2" :inverted="false" :start-angle="180" :end-angle="90" /> <GaugeIndicator :value="speedValue / 2" :inverted="true" :start-angle="-90" :end-angle="-180" /> </div> <div class="center-section"> <DxCircularGauge :value="speedValue" center-template="centerTemplate" > <DxSize :width="260"/> <DxValueIndicator :indent-from-center="55" :color="color" :spindle-size="0" :spindle-gap-size="0" /> <DxGeometry :start-angle="225" :end-angle="315" /> <DxScale :start-value="20" :end-value="200" :tick-interval="20" :minor-tick-interval="10" /> <template #centerTemplate="data"> <svg> <circle cx="100" cy="100" r="55" stroke-width="2" :stroke="color" fill="transparent" /> <text text-anchor="middle" x="100" y="100" font-size="50" font-weight="lighter" alignment-baseline="middle" :fill="color" >{{ data.data.value() }}</text> </svg> </template> </DxCircularGauge> <DxLinearGauge id="fuel-gauge" :value="50 - speedValue * 0.24" > <DxLinearSize :width="90" :height="20" /> <DxLinearScale :start-value="0" :end-value="50" :tick-interval="25" :minor-tick-interval="12.5" > <DxMinorTick :visible="true"/> <DxLabel :visible="false"/> </DxLinearScale> <DxLinearValueIndicator :size="8" :offset="7" :color="color" /> </DxLinearGauge> </div> <div class="right-section"> <GaugeIndicator :value="speedValue / 2" :inverted="true" :start-angle="90" :end-angle="0" /> <GaugeIndicator :value="speedValue / 2" :inverted="false" :start-angle="0" :end-angle="-90" /> </div> </div> <DxSlider id="slider" v-model:value="speedValue" :width="155" :min="0" :max="200" /> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import DxSlider from 'devextreme-vue/slider'; import DxCircularGauge, { DxSize, DxValueIndicator, DxGeometry, DxScale, } from 'devextreme-vue/circular-gauge'; import DxLinearGauge, { DxSize as DxLinearSize, DxValueIndicator as DxLinearValueIndicator, DxScale as DxLinearScale, DxMinorTick, DxLabel, } from 'devextreme-vue/linear-gauge'; import GaugeIndicator from './GaugeIndicator.vue'; const speedValue = ref(40); const color = '#f05b41'; </script> <style src="./styles.css"></style>

<template> <DxCircularGauge :value="value"> <DxSize :width="90" :height="90" /> <DxValueIndicator color="#f05b41"/> <DxGeometry :start-angle="startAngle" :end-angle="endAngle" /> <DxScale :start-value="inverted ? 100 : 0" :end-value="inverted ? 0 : 100" :tick-interval="50" /> </DxCircularGauge> </template> <script setup lang="ts"> import DxCircularGauge, { DxSize, DxValueIndicator, DxGeometry, DxScale, } from 'devextreme-vue/circular-gauge'; withDefaults(defineProps<{ value?: number startAngle?: number endAngle?: number inverted?: boolean }>(), { value: 0, startAngle: 0, endAngle: 90, inverted: true, }); </script>

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

#gauge-demo { height: 500px; } #gauge-container { text-align: center; margin: 20px auto; background-image: url('../../../../images/Gauges/mask.png'); background-repeat: no-repeat; width: 786px; height: 500px; } #gauge-container > div { display: inline-block; position: relative; } .left-section { top: -20px; left: -44px; } .center-section { top: 25px; } .right-section { top: -20px; right: -44px; } #fuel-gauge { position: absolute; left: 34%; bottom: 5%; } #slider { position: relative; top: -105px; margin: 0 auto; } #slider .dx-slider-bar { background-color: #fff; } #slider .dx-slider-handle { background-color: #f05b41; width: 16px; height: 16px; margin-top: -8px; margin-right: -8px; border-radius: 50%; border: none; } #slider .dx-slider-handle .dx-inkripple-wave { background: none; } #slider .dx-slider-handle::after { background-color: #f05b41; } #slider .dx-slider-range.dx-slider-range-visible { border-color: #f05b41; background-color: #f05b41; }

<!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/24.1.6/css/dx.light.css" /> <script src="https://unpkg.com/typescript@4.9.5/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.4.16/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/core-js@2.6.12/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.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>

NOTE

Use our DevExpress BI Dashboard to embed interactive business intelligence into your next web app.

The Web Dashboard is a data analysis UI component that you can embed into your ASP.NET Core or Angular, React, and Vue applications with .NET backend. Dashboards allow you to display multiple inter-connected data analysis elements such as grids, charts, maps, gauges, and others: all within an automatically-arranged layout.

The set of components allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly on the web client (includes adaptive layouts for tablet & mobile).

The Web Dashboard is available as a part of a Universal subscription.

Get Started with DevExpress BI Dashboard | Explore Demos