Overview
DevExtreme Vue Gauge controls are animated UI components designed for use in dashboards. The gauges can be of two geometric shapes: circular, or radial, and linear. 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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<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">
<DxSize :width="260"/>
<DxValueIndicator
:second-fraction="0.24"
type="twoColorNeedle"
color="none"
second-color="#f05b41"
/>
<DxGeometry
:start-angle="225"
:end-angle="315"
/>
<DxScale
:start-value="20"
:end-value="200"
:tick-interval="20"
:minor-tick-interval="10"
/>
</DxCircularGauge>
<div class="speed-value">
<span>{{ speedValue }}</span>
</div>
<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="#f05b41"
/>
</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>
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';
export default {
components: {
DxSlider,
DxCircularGauge,
DxSize,
DxValueIndicator,
DxGeometry,
DxScale,
DxLinearGauge,
DxLinearSize,
DxLinearValueIndicator,
DxLinearScale,
DxMinorTick,
DxLabel,
GaugeIndicator,
},
data() {
return {
speedValue: 40,
};
},
};
</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>
import DxCircularGauge, {
DxSize,
DxValueIndicator,
DxGeometry,
DxScale,
} from 'devextreme-vue/circular-gauge';
export default {
components: {
DxCircularGauge,
DxSize,
DxValueIndicator,
DxGeometry,
DxScale,
},
props: {
value: {
type: Number,
default: 0,
},
startAngle: {
type: Number,
default: 0,
},
endAngle: {
type: Number,
default: 90,
},
inverted: {
type: Boolean,
default: true,
},
},
};
</script>
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#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/22.2.6/css/dx.light.css" />
<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.js");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"> </div>
</div>
</body>
</html>
#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;
}
.speed-value {
position: absolute;
border: 2px solid #f05b41;
border-radius: 50%;
width: 110px;
height: 110px;
left: 28%;
top: 36%;
line-height: 100px;
}
.speed-value > span {
font-size: 50px;
font-weight: lighter;
color: #f05b41;
}
#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;
}
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'vue': 'npm:vue@3.2.47/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@22.2.6/cjs',
'devextreme-vue': 'npm:devextreme-vue@22.2.6',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.20/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.72/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.43/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'devextreme-vue': {
main: 'index.js',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
},
};
System.config(window.config);