Vue VectorMap - legends

Configures map legends.

Selector: DxLegend
Type:

Array<Object>

Default Value: undefined

A legend is a supplementary map element that helps end-users identify a map area or a map marker. The VectorMap UI component can display several legends simultaneously. To configure legends, declare an array of objects and assign it to the legends property. Each object in this array specifies settings of one legend. These settings are described in this section.

Each legend requires the source property to be set. This property specifies whether it is areas or markers that must be accompanied with a legend. Learn more from the description of the source property.

A map legend contains several legend items. A legend item consists of a marker and a text. You can change the size of markers using the markerSize property. To provide texts for legend items, you need to implement the customizeText function.

View Demo

backgroundColor

Colors the legend's background.

Selector: background-color
Type:

String

Default Value: undefined

This property supports the following colors:

border

Configures the legend's border.

Selector: DxBorder
Type:

Object

columnCount

Arranges legend items into several columns.

Selector: column-count
Type:

Number

Default Value: 0

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

See Also

columnItemSpacing

Specifies an empty space between item columns in pixels.

Selector: column-item-spacing
Type:

Number

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.

Selector: customize-hint
Type:

Function

Function parameters:
itemInfo:

Object

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:

String

The text for the hint to display.

Cannot be used in themes.

This property 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 property, hints will not appear.

customizeItems

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

Selector: customize-items
Type:

Function

Function parameters:
items:

Array<VectorMapLegendItem>

Legend items before customizations.

Return Value:

Array<VectorMapLegendItem>

Legend items after customizations.

View Demo

customizeText

Specifies text for legend items.

Selector: customize-text
Type:

Function

Function parameters:
itemInfo:

Object

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:

String

The text for the legend item to display.

Cannot be used in themes.

This property 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 properties.

Selector: DxFont
Type:

Object

horizontalAlignment

Along with verticalAlignment, specifies the legend's position.

Selector: horizontal-alignment
Type:

String

Default Value: 'right'
Accepted Values: 'center' | 'left' | '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.

Selector: items-alignment
Type:

String

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

itemTextPosition

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

Selector: item-text-position
Type:

String

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

margin

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

Selector: DxMargin
Type:

Number

|

Object

Default Value: 10

When set to a number, this property 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.

Selector: marker-color
Type:

String

Default Value: undefined

This property supports the following colors:

markerShape

Specifies the shape of item markers.

Selector: marker-shape
Type:

String

Default Value: 'square'
Accepted Values: 'circle' | 'square'

markerSize

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

Selector: marker-size
Type:

Number

Default Value: 12

markerTemplate

Specifies an SVG element that serves as a custom legend item marker.

Selector: marker-template
Type:

template

Template Data:

VectorMapLegendItem

Information about a legend item.

Default Name: undefined

View Demo

NOTE
To export custom SVG content rendered by this template, parse the content in the svgToCanvas function. Refer to the Export Custom Markup demo for an example.

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:

String

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

See Also

paddingLeftRight

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

Selector: padding-left-right
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.

Selector: padding-top-bottom
Type:

Number

Default Value: 10

DevExtreme Legend Top-Bottom Padding

rowCount

Arranges legend items in several rows.

Selector: row-count
Type:

Number

Default Value: 0

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

See Also

rowItemSpacing

Specifies an empty space between item rows in pixels.

Selector: row-item-spacing
Type:

Number

Default Value: 8

source

Specifies the source of data for the legend.

Selector: DxSource
Type:

Object

Cannot be used in themes.

title

Configures the legend title.

Selector: DxTitle
Type:

Object

|

String

DevExtreme PieChart: Legend Title

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

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

verticalAlignment

Along with horizontalAlignment, specifies the legend's position.

Selector: vertical-alignment
Type:

String

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

See Also

visible

Specifies the legend's visibility.

Type:

Boolean

Default Value: true