Vue LinearGauge - 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.
jQuery
index.js
$(function(){ $("#linearGaugeContainer").dxLinearGauge({ // ... rangeContainer: { // ... rangeContainer: { ranges: [ { startValue: 0, endValue: 50, color: '#92000A' }, { startValue: 50, endValue: 100, color: { fillId: customPatternId } } ] } } }); });
Angular
app.component.html
app.component.ts
<dx-linear-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-linear-gauge>
// ... export class AppComponent { // ... fill = { fillId: this.customPatternId }; }
Vue
App.vue (Options API)
App.vue (Composition API)
<template> <DxLinearGauge ... > <DxRangeContainer ... > <DxRange :start-value="0" :end-value="50" color="#92000A" /> <DxRange :start-value="50" :end-value="100" :color="fill" /> </DxRangeContainer> </DxLinearGauge> </template> <script> import DxLinearGauge, { DxRangeContainer, DxRange } from 'devextreme-vue/linear-gauge'; // ... export default { components: { DxLinearGauge, DxRangeContainer, DxRange }, data() { return { // ... fill: { fillId: this.customPatternId } } } } </script>
<template> <DxLinearGauge ... > <DxRangeContainer ... > <DxRange :start-value="0" :end-value="50" color="#92000A" /> <DxRange :start-value="50" :end-value="100" :color="fill" /> </DxRangeContainer> </DxLinearGauge> </template> <script setup> import DxLinearGauge, { DxRangeContainer, DxRange } from 'devextreme-vue/linear-gauge'; // ... const fill = { fillId: customPatternId }; </script>
React
App.js
import React from 'react'; import LinearGauge, { RangeContainer, Range } from 'devextreme-react/linear-gauge'; // ... const fill = { fillId: customPatternId }; export default function App() { return ( <LinearGauge ... > <RangeContainer ... > <Range startValue={0} endValue={50} color="#92000A" /> <Range startValue={50} endValue={100} color={fill} /> </RangeContainer> </LinearGauge> ); }
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.