Angular 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"
- }]
- });
- };
- }
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.