RangeBar
Type:
jQuery
index.js
$(function() {
$("#circularGauge").dxCircularGauge({
value: 40,
valueIndicator: { // or subvalueIndicator
type: "rangeBar",
// The rest of the indicator properties go here
}
});
});Angular
HTML
TypeScript
<dx-circular-gauge [value]="40">
<dxo-value-indicator <!-- or dxo-subvalue-indicator -->
type="rangeBar"
<!-- The rest of the indicator properties go here -->
></dxo-value-indicator>
<dx-circular-gauge>
import { DxCircularGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxCircularGaugeModule
],
// ...
})Vue
App.vue
<template>
<DxCircularGauge :value="40">
<DxValueIndicator <!-- or DxSubvalueIndicator -->
type="rangeBar"
<!-- The rest of the indicator properties go here -->
/>
</DxCircularGauge>
</template>
<script>
import DxCircularGauge, {
DxValueIndicator
} from 'devextreme-vue/circular-gauge';
export default {
components: {
DxCircularGauge,
DxValueIndicator
}
}
</script>React
App.js
import React from 'react';
import CircularGauge, {
ValueIndicator
} from 'devextreme-react/circular-gauge';
class App extends React.Component {
render() {
return (
<CircularGauge value={40}>
<ValueIndicator {/* or SubvalueIndicator */}
type="rangeBar"
{/* The rest of the indicator properties go here */}
/>
</CircularGauge>
);
}
}
export default App;ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().CircularGauge()
.ID("circularGauge")
.Value(40)
.ValueIndicator(vi => vi // or .SubvalueIndicator
.Type(GaugeIndicatorType.RangeBar)
// The rest of the indicator properties go here
)
)backgroundColor
Type:
Default Value: 'none'
This property supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
baseValue
By default, a range bar starts from the beginning of the gauge scale. If you need to draw the range bar starting from a specific scale value, assign the required value to the baseValue property. In this instance, the range bar will display the range from the baseValue to the main gauge value.
color
Default Value: '#CBC5CF'
This property supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
You can also specify a custom pattern or gradient instead of a plain color. Call the registerPattern() or registerGradient() method to obtain a fill ID. Assign that value to the fillId field.
jQuery
index.js
$(function(){
$("#circularGaugeContainer").dxCircularGauge({
// ...
valueIndicator: {
// ...
color: {
fillId: customPatternId
}
}
});
});Angular
app.component.html
app.component.ts
<dx-circular-gauge ... >
<dxo-value-indicator [color]="fill">
</dxo-value-indicator>
</dx-circular-gauge>
// ...
export class AppComponent {
// ...
fill = {
fillId: this.customPatternId
};
} Vue
App.vue (Options API)
App.vue (Composition API)
<template>
<DxCircularGauge ... >
<DxValueIndicator
:color="fill"
/>
</DxCircularGauge>
</template>
<script>
import DxCircularGauge, { DxValueIndicator } from 'devextreme-vue/circular-gauge';
// ...
export default {
components: {
DxCircularGauge,
DxValueIndicator
},
data() {
return {
// ...
fill: {
fillId: this.customPatternId
}
}
}
}
</script>
<template>
<DxCircularGauge ... >
<DxValueIndicator
:color="fill"
/>
</DxCircularGauge>
</template>
<script setup>
import DxCircularGauge, { DxValueIndicator } from 'devextreme-vue/circular-gauge';
// ...
const fill = {
fillId: customPatternId
};
</script>React
App.js
import React from 'react';
import CircularGauge, { ValueIndicator } from 'devextreme-react/circular-gauge';
// ...
const fill = {
fillId: customPatternId
};
export default function App() {
return (
<CircularGauge ... >
<ValueIndicator color={fill} />
</CircularGauge>
);
} palette
This property accepts either the name of a predefined palette or an array of colors. The array can include the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
Feedback