JavaScript/jQuery Chart - Legend

The series' color.

seriesIndex

The index of the series in the series array. To get the Series object by this index, call the getSeriesByPos(seriesIndex) method.

seriesName

any

The series' name. To get the Series object by this name, call the getSeriesByName(seriesName) method.

Return Value:

The text for the hint to display.

customizeItems

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

Type:

Function

Function parameters:

items:

Array<LegendItem>

Legend items before customizations.

Return Value:

Array<LegendItem>

Legend items after customizations.

customizeText

Specifies a callback function that returns the text to be displayed by a legend item.

Type:

Function

Function parameters:

seriesInfo:

Information on the series.

Object structure:

Name	Type	Description
seriesColor	String	The series' color.
seriesIndex	Number	The series' index.
seriesName	any	The series' name.

Name

Type

Description

seriesColor

The series' color.

seriesIndex

The series' index.

seriesName

any

The series' name.

Return Value:

The text for the legend item to display.

Cannot be used in themes.

font

Specifies the legend items' font properties.

Type:

horizontalAlignment

Along with verticalAlignment, specifies the legend's position.

Type:

HorizontalAlignment

Default Value: 'right'

hoverMode

Specifies what series elements to highlight when a corresponding item in the legend is hovered over.

Type:

LegendHoverMode

Default Value: 'includePoints'

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:

HorizontalAlignment

| undefined

Default Value: undefined

itemTextPosition

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

Type:

Position

| undefined

Default Value: undefined

margin

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

Type:

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

markerSize

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

Type:

Default Value: 20

markerTemplate

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

Type:

template

| undefined

Function parameters:

legendItem:

LegendItem

Information about a legend item.

element:

SVGGElement

A marker's container.

Return Value:

SVGElement

jQuery

One of the following:

Template name
SVG markup as a string
SVGElement
jQuery element that contains an SVGElement

Default Value: undefined

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:

Orientation

| undefined

Default Value: undefined

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

position

Specifies whether the legend is located outside or inside the chart's plot.

Type:

RelativePosition

Default Value: 'outside'

rowCount

Arranges legend items in several rows.

Type:

Default Value: 0

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

NOTE

If you specify this property and, as a result, legend items do not fit into the available space, this property is ignored.

rowItemSpacing

Specifies an empty space between item rows in pixels.

Type:

Default Value: 8

title

Configures the legend title.

Type: