Vue Funnel - label

Configures funnel item labels.

Selector: DxLabel
Type:

Object

View Demo

See Also

backgroundColor

Colors the labels' background. The default color is inherited from the funnel items.

Selector: background-color
Type:

String

This property supports the following colors:

You can remove the label's background by setting this property to "none". In this case, the label's text is the same color as the funnel item.

View Demo

border

Configures the label borders.

Selector: DxBorder
Type:

Object

connector

Configures label connectors.

Selector: DxConnector
Type:

Object

A label is always displayed near its funnel item, but separately from it. Use a connector to make the relationship between the funnel item and its label evident.

Set the label.connector.visible property to true to make the label connectors visible.

customizeText

Customizes labels' text.

Selector: customize-text
Type:

Function

Function parameters:
itemInfo:

Object

Information on the funnel item.

Object structure:
Name Type Description
item

Funnel Item

The Item object.
percent

Number

The item's percentage value.
percentText

String

The item's formatted percentage value converted to a string.
value

Number

The raw item value.
valueText

String

The item's 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.

View Demo

font

Specifies labels' font properties.

Selector: DxFont
Type:

Object

format

Formats the item value before displaying it in the label.

Selector: DxFormat
Type:

Format

Default Value: undefined

See the format section for information on accepted values.

If you specify the format with an object, it can also contain the percentPrecision field. Funnel items have absolute and percentage values. The percentPrecision field specifies how many decimal digits the percentage values should have:

JavaScript
format: {
    type: "fixedPoint", // the format of absolute values
    precision: 1, // the precision of absolute values (123.456 --> 123.4)
    percentPrecision: 2 // the precision of percentage values (12.3456 % --> 12.34 %)
}
See Also

horizontalAlignment

Specifies labels' position in relation to the funnel items.

Selector: horizontal-alignment
Type:

String

Default Value: 'right'
Accepted Values: 'left' | 'right'

horizontalOffset

Moves labels from their initial positions.

Selector: horizontal-offset
Type:

Number

Default Value: 0

The number assigned to this property specifies the shift in pixels. A negative number shifts the labels to the left, a positive number - to the right.

position

Specifies whether to display labels inside or outside funnel items or arrange them in columns.

Type:

String

Default Value: 'columns'
Accepted Values: 'columns' | 'inside' | 'outside'

View Demo

showForZeroValues

Specifies whether to show labels for items with zero value.

Selector: show-for-zero-values
Type:

Boolean

Default Value: false

textOverflow

Specifies what to do with label texts that overflow the allocated space after applying wordWrap: hide, truncate them and display an ellipsis, or do nothing.

Selector: text-overflow
Type:

String

Default Value: 'ellipsis'
Accepted Values: 'ellipsis' | 'hide' | 'none'

visible

Controls the labels' visibility.

Type:

Boolean

Default Value: true

wordWrap

Specifies how to wrap label texts if they do not fit into a single line.

Selector: word-wrap
Type:

String

Default Value: 'normal'
Accepted Values: 'normal' | 'breakWord' | 'none'

The following modes are available:

  • "normal"
    Text breaks only at allowed breakpoints (for example, a space between two words).

  • "breakWord"
    Words can be broken if there are no available breakpoints in the line.

  • "none"
    Word wrap is disabled.

If the text overflows the container even after word wrap, the UI component applies the textOverflow property.