Your search did not match any results.
Gauges

Custom Layout

API Reference
This demo shows how to adjust the relative position of the gauge elements. The range container, value and subvalue indicators have the offset option that specifies a shift from the scale for this element. When this option is assigned to a positive value, the corresponding element moves down from its initial position. Otherwise, it moves up.
Copy to Codepen
Apply
Reset
$(function(){ $("#gauge").dxLinearGauge({ scale: { startValue: 0, endValue: 30, tickInterval: 5, tick: { color: "#536878" }, label: { indentFromTick: -3 } }, rangeContainer: { offset: 10, ranges: [ { startValue: 0, endValue: 5, color: "#92000A" }, { startValue: 5, endValue: 20, color: "#E6E200" }, { startValue: 20, endValue: 30, color: "#77DD77" } ] }, valueIndicator: { offset: 20 }, subvalueIndicator: { offset: -15 }, "export": { enabled: true }, title: { text: "Issues Closed (with Min and Max Expected)", font: { size: 28 } }, value: 17, subvalues: [5, 25] }); });
<!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="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/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"></div> </div> </body> </html>
#gauge { height: 440px; width: 100%; }