DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.
Gauges

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.

Backend API
Copy to CodePen
Apply
Reset
$(() => { 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; }