Vue Funnel - label

Configures funnel item labels.

Type:

Object

backgroundColor

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

Type:

String

This option supports the following colors:

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

border

Configures the label borders.

Type:

Object

connector

Configures label connectors.

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 option to true to make the label connectors visible.

customizeText

Customizes labels' text.

Type:

Function

Function parameters:
itemInfo:

Object

Information on the funnel item.

Object structure:
Name Type Description
item

Funnel Item

The Item object.
value

Number

The raw item value.
valueText

String

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

Number

The item's percentage value.
percentText

String

The item's formatted percentage 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 labels' font options.

Type:

Object

format

Formats the item value before displaying it in the label.

Type:

Format

Default Value: undefined

This option accepts an object whose fields are described in the format section. The percentPrecision filed specifies how many decimal places should be included in the percentage value. See an example in the following code:

format: {
    type: "fixedPoint", // the format of absolute values
    precision: 1, // the precision of absolute values (0.123456 --> 0.1)
    percentPrecision: 2 // the precision of percentage values (12.3456 % --> 12.34 %)
}
NOTE
DevExtreme widgets provide a wide choice of predefined formats. If you are going to use custom formats instead, link the Globalize library to your project as shown in the Installation section.

horizontalAlignment

Specifies labels' position in relation to the funnel items.

Type:

String

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

Use the HorizontalEdge enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Left and Right.

horizontalOffset

Moves labels from their initial positions.

Type:

Number

Default Value: 0

The number assigned to this option 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'

Use the FunnelLabelPosition enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Inside, Outside, and Columns.

showForZeroValues

Specifies whether to show labels for items with zero value.

Type:

Boolean

Default Value: false

visible

Controls the labels' visibility.

Type:

Boolean

Default Value: true