Your search did not match any results.
Linear Gauge

Scale Custom Tick Values

This demo shows how to place major ticks at specific scale values. For this purpose, an array of required values is assigned to the customTicks option. In order to hide the automatically generated ticks, the showCalculatedTicks option is set to false.
Copy to CodePen
window.onload = function() { var viewModel = { gaugeOptions: { 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 } }; ko.applyBindings(viewModel, $("#gauge-demo").get(0)); };
<!DOCTYPE html> <html xmlns=""> <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> <script src=""></script> <link rel="stylesheet" type="text/css" href="" /> <link rel="stylesheet" type="text/css" href="" /> <link rel="dx-theme" data-theme="generic.light" href="" /> <script src=""></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" data-bind="dxLinearGauge: gaugeOptions"></div> </div> </div> </body> </html>
#gauge { height: 440px; width: 100%; }