Overview
DevExtreme JavaScript 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.
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.
$(() => {
const color = '#f05b41';
const gaugeOptions = {
scale: {
startValue: 0,
endValue: 100,
tickInterval: 50,
},
valueIndicator: {
color,
},
value: 20,
size: {
width: 90,
height: 90,
},
};
const speedGauge = $('#speed-gauge').dxCircularGauge({
geometry: {
startAngle: 225,
endAngle: 315,
},
scale: {
startValue: 20,
endValue: 200,
tickInterval: 20,
minorTickInterval: 10,
},
valueIndicator: {
indentFromCenter: 55,
color,
spindleSize: 0,
spindleGapSize: 0,
},
centerTemplate: (gauge, container) => {
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
circle.setAttribute('cx', 100);
circle.setAttribute('cy', 100);
circle.setAttribute('r', 55);
circle.setAttribute('stroke-width', 2);
circle.setAttribute('stroke', color);
circle.setAttribute('fill', 'transparent');
text.setAttribute('text-anchor', 'middle');
text.setAttribute('alignment-baseline', 'middle');
text.setAttribute('x', 100);
text.setAttribute('y', 100);
text.setAttribute('font-size', 50);
text.setAttribute('font-weight', 'lighter');
text.setAttribute('fill', color);
text.textContent = gauge.value();
container.appendChild(circle);
container.appendChild(text);
},
value: 40,
size: {
width: 260,
},
}).dxCircularGauge('instance');
$('#coolant-gauge').dxCircularGauge($.extend(true, {}, gaugeOptions, {
geometry: { startAngle: 180, endAngle: 90 },
}));
$('#psi-gauge').dxCircularGauge($.extend(true, {}, gaugeOptions, {
scale: { startValue: 100, endValue: 0 },
geometry: { startAngle: 90, endAngle: 0 },
}));
$('#rpm-gauge').dxCircularGauge($.extend(true, {}, gaugeOptions, {
scale: { startValue: 100, endValue: 0 },
geometry: { startAngle: -90, endAngle: -180 },
}));
$('#instant-fuel-gauge').dxCircularGauge($.extend(true, {}, gaugeOptions, {
geometry: { startAngle: 0, endAngle: -90 },
}));
const fuelGauge = $('#fuel-gauge').dxLinearGauge({
scale: {
startValue: 0,
endValue: 50,
tickInterval: 25,
minorTickInterval: 12.5,
minorTick: {
visible: true,
},
label: {
visible: false,
},
},
valueIndicator: {
color,
size: 8,
offset: 7,
},
value: 40.4,
size: {
width: 90,
height: 20,
},
}).dxLinearGauge('instance');
$('#slider').dxSlider({
min: 0,
max: 200,
value: 40,
width: 155,
onValueChanged(e) {
const gauges = ['coolant', 'psi', 'rpm', 'instant-fuel'];
speedGauge.value(e.value);
gauges.forEach((gaugeName) => {
$(`#${gaugeName}-gauge`).dxCircularGauge('instance').value(e.value / 2);
});
fuelGauge.value(50 - e.value * 0.24);
},
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="gauge-demo">
<div id="gauge-container">
<div class="left-section">
<div id="coolant-gauge"></div>
<div id="rpm-gauge"></div>
</div>
<div class="center-section">
<div id="speed-gauge"></div>
<div id="fuel-gauge"></div>
</div>
<div class="right-section">
<div id="psi-gauge"></div>
<div id="instant-fuel-gauge"></div>
</div>
</div>
<div id="slider"></div>
</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: -40px;
}
.center-section {
top: 25px;
}
.right-section {
top: -20px;
right: -40px;
}
#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;
}