Angular LinearGauge - RangeBar
An object that defines a gauge indicator of the rangeBar type.
jQuery
$(function() { $("#linearGauge").dxLinearGauge({ value: 40, valueIndicator: { // or subvalueIndicator type: "rangeBar", // The rest of the indicator properties go here } }); });
Angular
<dx-linear-gauge [value]="40"> <dxo-value-indicator <!-- or dxo-subvalue-indicator --> type="rangeBar" <!-- The rest of the indicator properties go here --> ></dxo-value-indicator> <dx-linear-gauge>
import { DxLinearGaugeModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxLinearGaugeModule ], // ... })
Vue
<template> <DxLinearGauge :value="40"> <DxValueIndicator <!-- or DxSubvalueIndicator --> type="rangeBar" <!-- The rest of the indicator properties go here --> /> </DxLinearGauge> </template> <script> import DxLinearGauge, { DxValueIndicator } from 'devextreme-vue/linear-gauge'; export default { components: { DxLinearGauge, DxValueIndicator } } </script>
React
import React from 'react'; import LinearGauge, { ValueIndicator } from 'devextreme-react/linear-gauge'; class App extends React.Component { render() { return ( <LinearGauge value={40}> <ValueIndicator {/* or SubvalueIndicator */} type="rangeBar" {/* The rest of the indicator properties go here */} /> </LinearGauge> ); } } export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().LinearGauge() .ID("linearGauge") .Value(40) .ValueIndicator(vi => vi // or .SubvalueIndicator .Type(GaugeIndicatorType.RangeBar) // The rest of the indicator properties go here ) )
backgroundColor
Specifies the background color for the indicator of the rangeBar type.
This property supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
baseValue
Specifies the base value for the indicator of the rangeBar type.
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
Specifies the color of the indicator.
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
$(function(){ $("#linearGaugeContainer").dxLinearGauge({ // ... valueIndicator: { // ... color: { fillId: customPatternId } } }); });
Angular
<dx-linear-gauge ... > <dxo-value-indicator [color]="fill"> </dxo-value-indicator> </dx-linear-gauge>
// ... export class AppComponent { // ... fill = { fillId: this.customPatternId }; }
Vue
<template> <DxLinearGauge ... > <DxValueIndicator :color="fill" /> </DxLinearGauge> </template> <script> import DxLinearGauge, { DxValueIndicator } from 'devextreme-vue/linear-gauge'; // ... export default { components: { DxLinearGauge, DxValueIndicator }, data() { return { // ... fill: { fillId: this.customPatternId } } } } </script>
<template> <DxLinearGauge ... > <DxValueIndicator :color="fill" /> </DxLinearGauge> </template> <script setup> import DxLinearGauge, { DxValueIndicator } from 'devextreme-vue/linear-gauge'; // ... const fill = { fillId: customPatternId }; </script>
React
import React from 'react'; import LinearGauge, { ValueIndicator } from 'devextreme-react/linear-gauge'; // ... const fill = { fillId: customPatternId }; export default function App() { return ( <LinearGauge ... > <ValueIndicator color={fill} /> </LinearGauge> ); }
horizontalOrientation
Specifies the orientation of the rangeBar indicator. Applies only if the geometry.orientation property is "vertical".
This property specifies the orientation of the indicator relative to an invisible scale line.
offset
Specifies the distance between the indicator and the invisible scale line.
palette
Sets the palette to be used to colorize indicators differently.
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
text
Specifies the appearance of the text displayed in an indicator of the rangeBar type.
Note that the indent property of the text configuration object must not be set to 0 if you need to show the text.
verticalOrientation
Specifies the orientation of the rangeBar indicator. Applies only if the geometry.orientation property is "horizontal".
This property specifies the orientation of an indicator relative to an invisible scale line.
If you have technical questions, please create a support ticket in the DevExpress Support Center.