React Funnel - legend

Configures the legend.

Type:

Object

The legend is a component that helps a user identify funnel items. The legend contains several items, one per funnel item, each consisting of a colored marker and text showing the funnel item's argument.

DevExtreme HTML5 Javacript Funnel Legend

You can make the legend visible by setting the legend.visible option to true.

backgroundColor

Colors the legend's background.

Type:

String

Default Value: undefined

This option supports the following colors:

border

Configures the legend's border.

Type:

Object

columnCount

Arranges legend items into several columns.

Type:

Number

Default Value: 0

Use this option when the legend is oriented vertically. Otherwise, use rowCount.

See Also

columnItemSpacing

Specifies an empty space between item columns in pixels.

Type:

Number

Default Value: 20

customizeHint

Specifies the hint that appears when a user hovers the mouse pointer over a legend item.

Type:

Function

Function parameters:
itemInfo:

Object

Information on the funnel item and its corresponding legend item.

Object structure:
Name Type Description
item

Funnel Item

The Item object.
text

String

The legend item's text.
Return Value:

String

The text to be displayed in the hint.

This option accepts a function that must return the required text. When implementing this function, use its parameter to access the information on the series that corresponds to the legend item.

customizeText

Customizes the text displayed by legend items.

Type:

Function

Function parameters:
itemInfo:

Object

Information on the funnel item and its corresponding legend item.

Object structure:
Name Type Description
item

Funnel Item

The Item object.
text

String

The legend item's original text.
Return Value:

String

The text for the legend item to display.

Cannot be used in themes.

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

font

Specifies the legend items' font options.

Type:

Object

horizontalAlignment

Along with verticalAlignment, specifies the legend's position.

Type:

String

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

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

See Also

itemsAlignment

Aligns items in the last column or row (depending on the legend's orientation). Applies when legend items are not divided into columns or rows equally.

Type:

String

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

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

itemTextPosition

Specifies the text's position relative to the marker in a legend item.

Type:

String

Default Value: undefined
Accepted Values: 'bottom' | 'left' | 'right' | 'top'

margin

Generates an empty space, measured in pixels, around the legend.

Type:

Number

|

Object

Default Value: 10

When set to a number, this option applies to all the legend's sides. The object allows you to control each side individually.

DevExtreme Legend Margins

markerSize

Specifies the marker's size in a legend item in pixels.

Type:

Number

Default Value: 20

orientation

Arranges legend items vertically (in a column) or horizontally (in a row). The default value is "horizontal" if the legend.horizontalAlignment is "center". Otherwise, it is "vertical".

Type:

String

Default Value: undefined
Accepted Values: 'horizontal' | 'vertical'

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

See Also

paddingLeftRight

Generates an empty space, measured in pixels, between the legend's left/right border and its items.

Type:

Number

Default Value: 10

DevExtreme Legend Left-Right Padding

paddingTopBottom

Generates an empty space, measured in pixels, between the legend's top/bottom border and its items.

Type:

Number

Default Value: 10

DevExtreme Legend Top-Bottom Padding

rowCount

Arranges legend items in several rows.

Type:

Number

Default Value: 0

Use this option when the legend is oriented horizontally. Otherwise, use columnCount.

See Also

rowItemSpacing

Specifies an empty space between item rows in pixels.

Type:

Number

Default Value: 8

verticalAlignment

Along with horizontalAlignment, specifies the legend's position.

Type:

String

Default Value: 'top'
Accepted Values: 'bottom' | 'top'

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

See Also

visible

Specifies the legend's visibility.

Type:

Boolean

Default Value: false