React Funnel - label
Configures funnel item labels.
backgroundColor
Colors the labels' background. The default color is inherited from the funnel items.
This option supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG 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.
connector
Configures label connectors.
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.
Information on the funnel item.
The text for the label to display.
this
keyword.format
Formats the item value before displaying it in the label.
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 %) }
horizontalAlignment
Specifies labels' position in relation to the funnel items.
Use the HorizontalEdge
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Left
and Right
.
horizontalOffset
Moves labels from their initial positions.
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.
Use the FunnelLabelPosition
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Inside
, Outside
, and Columns
.
showForZeroValues
Specifies whether to show labels for items with zero value.
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.
Use the VizTextOverflow
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Ellipsis
, Hide
, and None
.
wordWrap
Specifies how to wrap label texts if they do not fit into a single line.
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 widget applies the textOverflow option.
Use the VizWordWrap
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Normal
, BreakWord
, and None
.
If you have technical questions, please create a support ticket in the DevExpress Support Center.