JavaScript/jQuery Gauges - Different Value Indicator Types

This demo illustrates all the available value indicator types for the CircularGauge.

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

​x
 
$(() => {
  const options = {    geometry: {      startAngle: 180,      endAngle: 0,    },    scale: {      startValue: 0,      endValue: 100,      tickInterval: 50,      label: {        customizeText(arg) {          return `${arg.valueText} %`;        },      },    },  };​  $('#rectangleNeedle').dxCircularGauge($.extend(true, {}, options, {    value: 75,    valueIndicator: {      type: 'rectangleNeedle',      color: '#9B870C',    },  }));  $('#twoColorNeedle').dxCircularGauge($.extend(true, {}, options, {    value: 80,    valueIndicator: {      type: 'twoColorNeedle',      color: '#779ECB',      secondColor: '#734F96',    },  }));  $('#triangleNeedle').dxCircularGauge($.extend(true, {}, options, {    value: 65,    valueIndicator: {      type: 'triangleNeedle',      color: '#8FBC8F',    },  }));  $('#rangebar').dxCircularGauge($.extend(true, {}, options, {    value: 90,    valueIndicator: {      type: 'rangebar',      color: '#f05b41',    },  }));  $('#textCloud').dxCircularGauge($.extend(true, {}, options, {    value: 70,    valueIndicator: {      type: 'textCloud',      color: '#483D8B',    },  }));  $('#triangleMarker').dxCircularGauge($.extend(true, {}, options, {    value: 85,    valueIndicator: {      type: 'triangleMarker',      color: '#e0e33b',    },  }));});​

xxxxxxxxxx
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">  <head>↔</head>  <body class="dx-viewport">    <div class="demo-container">      <div class="long-title"><h3>Power of Engines</h3></div>      <div id="gauge-demo">        <div id="rectangleNeedle"></div>        <div id="twoColorNeedle"></div>        <div id="triangleNeedle"></div>        <div id="rangebar"></div>        <div id="textCloud"></div>        <div id="triangleMarker"></div>      </div>    </div>  </body></html>​

xxxxxxxxxx
 
#chart-demo {
  width: 100%;}​#rectangleNeedle,#twoColorNeedle,#triangleNeedle,#rangebar,#textCloud,#triangleMarker {  display: inline-block;}​#rectangleNeedle,#twoColorNeedle,#triangleNeedle {  width: 33%;}​#rangebar,#triangleMarker {  width: 32%;}​#textCloud {  width: 35%;  vertical-align: bottom;}​.long-title h3 {  font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;  font-weight: 200;  font-size: 28px;  text-align: center;  margin-bottom: 20px;}​