Vue CircularGauge - rangeContainer.ranges
Ranges allow you to mark certain value ranges in the gauge. Visually, the ranges are displayed as bars along scales. To define ranges, introduce the ranges array. Specify a start value, an end value and a color for each range.
color
Selector: DxColor
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.
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';
- // ...
- export default {
- components: {
- DxCircularGauge,
- DxRangeContainer,
- DxRange
- },
- data() {
- return {
- // ...
- fill: {
- fillId: this.customPatternId
- }
- }
- }
- }
- </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';
- // ...
- const fill = {
- fillId: customPatternId
- };
- </script>
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.