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 toward the center of the gauge. Otherwise, it moves away from the center.
Copy to Codepen
Apply
Reset
$(function(){ $("#gauge").dxCircularGauge({ scale: { startValue: 0, endValue: 100, tick: { color: "#536878" }, tickInterval: 10, label: { indentFromTick: 3 } }, rangeContainer: { offset: 10, ranges: [ { startValue: 0, endValue: 30, color: "#92000A" }, { startValue: 30, endValue: 70, color: "#E6E200" }, { startValue: 70, endValue: 100, color: "#77DD77" } ] }, valueIndicator: { offset: 50 }, subvalueIndicator: { offset: -25 }, title: { text: "Amount of Tickets Sold (with Min and Max Expected)", font: { size: 28 } }, "export": { enabled: true }, value: 85, subvalues: [40, 90] }); });
<!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%; }