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
$(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=""> <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=""></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery-3.1.0.min.js"%3E%3C/script%3E'))</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"></div> </div> </body> </html>
#gauge { height: 440px; width: 100%; }