JavaScript/jQuery VectorMap - legends

Default Value: undefined

This option supports the following colors:

Hexadecimal colors
RGB colors
RGBA colors
Predefined/cross-browser color names
Predefined SVG colors

border

Configures the legend's border.

Type:

columnCount

Arranges legend items into several columns.

Type:

Default Value: 0

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

columnItemSpacing

Specifies an empty space between item columns in pixels.

Type:

Default Value: 20

customizeHint

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

Type:

Function

Function parameters:

itemInfo:

Information on a legend item.

Object structure:

Name	Type	Description
color	String	The legend item's color. This field is undefined if the source is 'markerSizeGroups'.
end	Number	The end value of the group indicated by the legend item.
index	Number	The group's index.
size	Number	The diameter of the legend item in pixels. This field is undefined if the source is 'areaColorGroups' or 'markerColorGroups'.
start	Number	The start value of the group indicated by the legend item.

Return Value:

Array<VectorMapLegendItem>

The text for the hint to display.

Cannot be used in themes.

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

NOTE

If you have not provided text for legend items using the customizeText option, hints will not appear.

customizeItems

Allows you to change the order and visibility of legend items.

Type:

Function

Function parameters:

items:

Legend items before customizations.

Return Value:

Array<VectorMapLegendItem>

Legend items after customizations.

View Demo

customizeText

Specifies text for legend items.

Type:

Function

Function parameters:

itemInfo:

Information on a legend item.

Object structure:

Name	Type	Description
color	String	The legend item's color. This field is undefined if the source is 'markerSizeGroups'.
end	Number	The end value of the group indicated by the legend item.
index	Number	The group's index.
size	Number	The diameter of the legend item in pixels. This field is undefined if the source is 'areaColorGroups' or 'markerColorGroups'.
start	Number	The start value of the group indicated by the legend item.

Return Value:

The text for the legend item to display.

Cannot be used in themes.

This option accepts a function that returns the text for a legend item. When implementing this function, you can access useful data on the legend item using the function's argument.

font

Specifies the legend items' font options.

Type:

horizontalAlignment

Along with verticalAlignment, specifies the legend's position.

Type:

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 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Left, Center, and Right.

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:

Default Value: undefined

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

itemTextPosition

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

Type:

Default Value: undefined

Accepted Values: 'bottom' | 'left' | 'right' | 'top'

margin

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

Type:

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

markerColor

Specifies the color of item markers in the legend. The specified color applied only when the legend uses 'size' source.

Type:

Default Value: undefined

markerShape

Specifies the shape of item markers.

Type:

Default Value: 'square'

Accepted Values: 'circle' | 'square'

Use the VectorMapMarkerShape 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: Circle and Square.

markerSize

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

Type:

Default Value: 12

orientation

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

Type:

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 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Horizontal and Vertical.

paddingLeftRight

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

Type:

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:

Default Value: 10

DevExtreme Legend Top-Bottom Padding

rowCount

Arranges legend items in several rows.

Type:

Default Value: 0

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

rowItemSpacing

Specifies an empty space between item rows in pixels.

Type:

Default Value: 8

source

Specifies the source of data for the legend.

Type:

Cannot be used in themes.

title

Configures the legend title.

Type:

DevExtreme PieChart: Legend Title

To specify only the title's text, assign it directly to this option. Otherwise, set this option to an object with the text and other fields specified.

The title can be accompanied by a subtitle. Assign it to the title.subtitle option.

verticalAlignment

Along with horizontalAlignment, specifies the legend's position.

Type: