Your search did not match any results.
Gauges

Palette

API Reference
In this demo, the gauge uses one of predefined palettes for coloring bars. This palette is specified by the palette option. You are not limited to use only the predefined palettes. To specify your own palette, assign an array of required colors to the aforementioned option.
Copy to Codepen
Apply
Reset
$(function(){ $("#gauge").dxBarGauge({ startValue: -50, endValue: 50, baseValue: 0, values: [-21.3, 14.8, -30.9, 45.2], label: { customizeText: function (arg) { return arg.valueText + " mm"; } }, "export": { enabled: true }, palette: "ocean", title: { text: "Deviations in the Manufactured Parts", font: { size: 28 } } }); });
<!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%; }