Vue BarGauge - label

Specifies the properties of the labels that accompany gauge bars.

Selector: DxLabel
Type:

Object

Each gauge bar is accompanied by a label that usually displays the value of the bar. Use the properties of the label object to customize the label's text, specify its format, font, and distance between the label and the bar.

To hide labels, use the label.visible property or assign false straight to the label property.

View Demo

See Also

connectorColor

Specifies a color for the label connector text.

Selector: connector-color
Type:

String

| undefined
Default Value: undefined

This property supports the following colors:

connectorWidth

Specifies the width of the label connector in pixels.

Selector: connector-width
Type:

Number

Default Value: 2

customizeText

Specifies a callback function that returns a text for labels.

Selector: customize-text
Type:

Function

Function parameters:
barValue:

Object

Information on the bar value.

Object structure:
Name Type Description
value

Number

The raw value.
valueText

String

The formatted value converted to a string.
Return Value:

String

The text for the label to display.

Cannot be used in themes.

NOTE
As an alternative to the function’s parameter you can use the this keyword.

font

Specifies font properties for bar labels.

Selector: DxFont
Type:

Object

format

Formats a value before it is displayed in a label. Accepts only numeric formats.

Selector: DxFormat
Type:

Format

| undefined
Default Value: undefined

See the format section for information on accepted values.

View Demo

See Also

indent

Specifies the distance between the upper bar and bar labels in pixels.

Type:

Number

Default Value: 20

visible

Specifies whether bar labels appear on a gauge or not.

Type:

Boolean

Default Value: true