JavaScript/jQuery Gauges - Scale Custom Tick Interval

This demo shows how to specify custom tick intervals for major and minor ticks on the scale using the tickInterval and minorTickInterval properties 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.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

$(() => { $('#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" lang="en"> <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=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css" /> <script src="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%; }