All docs
V24.2
24.2
24.1
23.2
23.1
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

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"
  • }]
  • })
  • } }
  • ]
  • }
  • }
  • });
  • });