JavaScript/jQuery CircularGauge - Customize Appearance

You can use the following properties to colorize gauge elements:

You can also add a custom pattern or gradient fill to the elements. Use the registerPattern() or registerGradient() method to create a custom pattern or gradient.

The following example adds a gradient to one of the ranges in a gauge:

index.js
  • const registerGradient = DevExpress.common.charts.registerGradient;
  •  
  • $(function(){
  • $("#circularGaugeContainer").dxCircularGauge({
  • // ...
  • rangeContainer: {
  • // ...
  • rangeContainer: {
  • ranges: [
  • { startValue: 0, endValue: 50, color: '#92000A' },
  • { startValue: 50, endValue: 100, color: {
  • fillId: registerGradient("linear", {
  • colors: [{
  • offset: "20%",
  • color: "#97c95c"
  • }, {
  • offset: "90%",
  • color: "#eb3573"
  • }]
  • })
  • } }
  • ]
  • }
  • }
  • });
  • });