Your search did not match any results.
Gauges

Scale Custom Tick Values

API Reference
In this demo, scale is divided using manually specified major ticks. It is performed using the customTickValues option. In order to hide automatically generated ticks, the showCalculatedTicks option is set to false.
Copy to Codepen
Apply
Reset
$(function(){ $("#gauge").dxLinearGauge({ geometry: { orientation: "vertical" }, scale: { startValue: 0, endValue: 50, customTicks: [0, 10, 25, 50] }, title: { text: "Fuel Volume (in Liters)", font: { size: 28 } }, "export": { enabled: true }, value: 35 }); });
<!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%; }