React BarGauge - label

Specifies the options of the labels that accompany gauge bars.

Type:

Object

Each gauge bar is accompanied by a label that usually displays the value of the bar. Use the options 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 option or assign false straight to the label option.

View Demo

See Also

connectorColor

Specifies a color for the label connector text.

Type:

String

Default Value: undefined

This option supports the following colors:

connectorWidth

Specifies the width of the label connector in pixels.

Type:

Number

Default Value: 2

customizeText

Specifies a callback function that returns a text for labels.

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.
See Also

font

Specifies font options for bar labels.

Type:

Object

format

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

Type:

Format

Default Value: undefined

See the format section for details 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