Your search did not match any results.
Gauges

Scale Custom Tick Interval

API Reference
This demo shows how to specify custom tick intervals for major and minor ticks on the scale using the tickInterval option of the majorTick and minorTick configuration objects respectively. In addition, you can set ticks at specific positions on the scale. To learn how to do this, refer to the next demo.
Copy to Codepen
Apply
Reset
$(function(){ $("#gauge").dxLinearGauge({ 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 }); });
<!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%; }