Vue LinearGauge - valueIndicator
The value indicator is a pointer that designates the main value of the gauge. There are several types of value indicators. Set the required one by using the type property, and then specify the properties that are specific to this type, if needed. To learn about the properties that can be specified for a particular type, refer to one of the following sections.
backgroundColor
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
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".
indentFromCenter
Specifies the distance between the needle and the center of a gauge for the indicator of a needle-like type.
secondColor
When you use a twoColorNeedle indicator, define the colors for it using the color and secondColor properties. The color property sets the color for the base of the needle. The secondColor property sets the color for the tip of the needle.
This property supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
In addition, you can specify the ratio between the main and the second color using the secondFraction property.
secondFraction
type
Different properties of the valueIndicator configuration object can be set for different types of the value indicator. These properties are listed within the Indicator Types section.
verticalOrientation
Specifies the orientation of the rangeBar indicator. Applies only if the geometry.orientation property is "horizontal".
If you have technical questions, please create a support ticket in the DevExpress Support Center.