JavaScript/jQuery LinearGauge - 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(){
- $("#linearGaugeContainer").dxLinearGauge({
- // ...
- 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"
- }]
- })
- } }
- ]
- }
- }
- });
- });
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.