Vue 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:

app.component.html
app.component.ts
  • <dx-circular-gauge ... >
  • <dxo-range-container ... >
  • <dxi-range [startValue]="0" [endValue]="50" color="#92000A"></dxi-range>
  • <dxi-range [startValue]="50" [endValue]="100" [color]="fill">
  • </dxo-range-container>
  • </dx-circular-gauge>
  • import { registerGradient } from "devextreme/common/charts";
  •  
  • export class AppComponent {
  • // ...
  •  
  • fill = {
  • fillId: registerGradient("linear", {
  • colors: [{
  • offset: "20%",
  • color: "#97c95c"
  • }, {
  • offset: "90%",
  • color: "#eb3573"
  • }]
  • });
  • };
  • }