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:
jQuery
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"
}]
})
} }
]
}
}
});
});Angular
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"
}]
});
};
} Vue
App.vue (Options API)
App.vue (Composition API)
<template>
<DxCircularGauge ... >
<DxRangeContainer ... >
<DxRange
:start-value="0"
:end-value="50"
color="#92000A"
/>
<DxRange
:start-value="50"
:end-value="100"
:color="fill"
/>
</DxRangeContainer>
</DxCircularGauge>
</template>
<script>
import DxCircularGauge, { DxRangeContainer, DxRange } from 'devextreme-vue/circular-gauge';
import { registerGradient } from 'devextreme/common/charts';
// ...
export default {
components: {
DxCircularGauge,
DxRangeContainer,
DxRange
},
data() {
return {
// ...
fill: {
fillId: registerGradient("linear", {
colors: [{
offset: "20%",
color: "#97c95c"
}, {
offset: "90%",
color: "#eb3573"
}]
});
}
}
}
}
</script>
<template>
<DxCircularGauge ... >
<DxRangeContainer ... >
<DxRange
:start-value="0"
:end-value="50"
color="#92000A"
/>
<DxRange
:start-value="50"
:end-value="100"
:color="fill"
/>
</DxRangeContainer>
</DxCircularGauge>
</template>
<script setup>
import DxCircularGauge, { DxRangeContainer, DxRange } from 'devextreme-vue/circular-gauge';
import { registerGradient } from 'devextreme/common/charts';
// ...
const fill = {
fillId: registerGradient("linear", {
colors: [{
offset: "20%",
color: "#97c95c"
}, {
offset: "90%",
color: "#eb3573"
}]
});
};
</script>React
App.js
import React from 'react';
import CircularGauge, { RangeContainer, Range } from 'devextreme-react/circular-gauge';
import { registerGradient } from 'devextreme/common/charts';
// ...
const fill = {
fillId: registerGradient("linear", {
colors: [{
offset: "20%",
color: "#97c95c"
}, {
offset: "90%",
color: "#eb3573"
}]
});
};
export default function App() {
return (
<CircularGauge ... >
<RangeContainer ... >
<Range startValue={0} endValue={50} color="#92000A" />
<Range startValue={50} endValue={100} color={fill} />
</RangeContainer>
</CircularGauge>
);
} Feedback