Your search did not match any results.
Gauges

Scale Custom Tick Interval

Documentation
This demo shows how to specify custom tick intervals for major and minor ticks on the scale using the tickInterval and minorTickInterval options of the scale object. In addition, you can place ticks at specific positions on the scale. To learn how to do this, see the next demo.
Copy to Codepen
Apply
Reset
window.onload = function() { var viewModel = { gaugeOptions: { scale: { startValue: 0, endValue: 5, tickInterval: 2.5, minorTickInterval: 0.625, minorTick: { visible: true } }, "export": { enabled: true }, title: { text: "TV Show Rating", font: { size: 28 } }, value: 4.3 } }; ko.applyBindings(viewModel, $("#gauge-demo").get(0)); };
<!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> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.3/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/17.1.3/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" data-bind="dxLinearGauge: gaugeOptions"></div> </div> </div> </body> </html>
#gauge { height: 440px; width: 100%; }