JavaScript/jQuery LinearGauge - subvalueIndicator
Specifies the appearance properties of subvalue indicators.
The LinearGauge UI component can display one main value and several subvalues. The gauge's main value and subvalues are indicated by special pointers. You can customize the appearance of these pointers using the valueIndicator and subvalueIndicator configuration objects correspondingly.
The subvalue indicator is a pointer, which designates an extra value on a scale. There are several types of subvalue 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 the properties that can be specified for a particular type, refer to one of the following sections.
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.
beginAdaptingAtRadius
Specifies a radius small enough for the indicator to begin adapting.
When adapting, the indicator adjusts its parts and surroundings proportionally to the changing UI component size. The adjustments affect the incidator's indent from the center, the offset from the scale, and the spindle's size and gap.
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.
indentFromCenter
Specifies the distance between the needle and the center of a gauge for the indicator of a needle-like type.
length
Specifies the indicator length.
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
secondColor
Specifies the second color for the indicator of the twoColorNeedle type.
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.
spindleGapSize
Specifies the inner diameter in pixels, so that the spindle has the shape of a ring.
Set this property to 0 so that the spindle has the shape of a circle.
spindleSize
Specifies the spindle's diameter in pixels for the indicator of a needle-like type.
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.
type
Specifies the type of subvalue indicators.
Different properties of the subvalueIndicator configuration object can be set for different types of the subvalue indicators. 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".
This property specifies the orientation of an indicator relative to an invisible scale line.
width
Specifies the width of an indicator in pixels.