Your search did not match any results.
Circular Gauge

Gauge Title Customized


This demo shows how to specify and customize the CircularGauge title using the properties of the title configuration object.

Backend API
Copy to CodePen
$(() => { $('#gauge').dxCircularGauge({ scale: { startValue: 0, endValue: 10, tickInterval: 2, }, value: 7, title: { text: 'Amount of Produced Gold (Kilos)', horizontalAlignment: 'center', verticalAlignment: 'bottom', font: { size: 30, color: '#CFB53B', }, margin: { top: 25, }, }, }); });
<!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.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" 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%; }