React Chart - legend

Specifies the options of a chart's legend.

Type:

Object

The Chart widget can include a legend - an explanatory component that helps you identify a series. Each series is represented by an item on a Legend. An item marker identifies the series color. An item label displays the series title. To set the required position for a legend and its items, to customize the font settings for item labels, and to specify the size of item markers, use the properties of the legend configuration object. To learn more on the legend and its options, refer to the Legend topic.

backgroundColor

Specifies a color for the legend's background.

Type:

String

Default Value: undefined

border

Specifies legend border options.

Type:

Object

Use this object to make a legend's border visible/invisible and set up such border options as color, width etc.

columnCount

Specifies how many columns it takes to arrange legend items.

Type:

Number

Default Value: 0

To arrange legend items, specify how many rows and columns they must occupy. To do this, use the rowCount and columnCount properties.

columnItemSpacing

Specifies a blank space between legend columns in pixels.

Type:

Number

Default Value: 20

customizeHint

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

Type:

Function

Function parameters:
seriesInfo:

Object

Information on the series.

Object structure:
Name Type Description
seriesName any

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

Number

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

String

The series' color.
Return Value:

String

The text for the hint to display.

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

customizeText

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

Type:

Function

Function parameters:
seriesInfo:

Object

Information on the series.

Object structure:
Name Type Description
seriesName any

The series' name.
seriesIndex

Number

The series' index.
seriesColor

String

The series' color.
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 font options for the text displayed in the legend.

Type:

Object

horizontalAlignment

Specifies a legend's position on the chart.

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.

hoverMode

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

Type:

String

Default Value: 'includePoints'
Accepted Values: 'excludePoints' | 'includePoints' | 'none'

In the Chart widget, legend items represent series. When a legend item is hovered over, the corresponding series is highlighted. To prevent this behavior, set the hoverMode property to 'none'.

You can set a custom 'hover' style for a series and/or its points. To do this, use the series' hoverStyle configuration object and/or the point.hoverStyle configuration object.

Use the ChartLegendHoverMode enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: IncludePoints, ExcludePoints, and None.

View Demo

itemsAlignment

Specifies the alignment of legend items.

Type:

String

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

This option is useful when there is an odd count of items in the legend and they are placed in several columns.

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 position of text relative to the item marker.

Type:

String

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

A legend item consists of a marker that indicates the series (for the Chart widget) / point (for the PieChart widget) color and text that specifies the name of the series/point. Use the itemTextPosition property to specify the position of the text relative to the item marker.

margin

Specifies the distance between the legend and surrounding widget elements or container borders in pixels.

Type:

Number

|

Object

Default Value: 10

When this option is set to a number, the specified margin applies to all the sides of the legend. Alternatively, the margin option can be set to an object. This object specifies margins for each side of the legend separately.

Whether or not the specified margin is applied to a particular side of the legend depends on the legend's location. The location is determined by the horizontalAlignment and verticalAlignment options. Refer to the top, bottom, left and right options' description to discover when the margin applies to the corresponding side of the legend.

LegendMargin ChartJS

markerSize

Specifies the size of item markers in the legend in pixels.

Type:

Number

Default Value: 20

orientation

Specifies whether to place legend items horizontally or vertically.

Type:

String

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

When this option is set to 'vertical', legend items are displayed vertically (i.e., in a column). When this option is set to 'horizontal', legend items are displayed horizontally (i.e, in a row). When this option is not defined, the legend orientation is chosen automatically.

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.

paddingLeftRight

Specifies a blank space between a legend's left/right boundaries and the inner item boundaries in pixels.

Type:

Number

Default Value: 10

LegendPadding ChartJS

paddingTopBottom

Specifies a blank space between a legend's top/bottom boundaries and the inner item boundaries in pixels.

Type:

Number

Default Value: 10

LegendPadding ChartJS

position

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

Type:

String

Default Value: 'outside'
Accepted Values: 'inside' | 'outside'

In addition to this option, use the legend's horizontalAlignment, verticalAlignment and orientation options to specify the legend layout.

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

rowCount

Specifies how many rows it takes to arrange legend items.

Type:

Number

Default Value: 0

To arrange legend items, specify how many rows and columns they must occupy. To do this, use the rowCount and columnCount properties.

rowItemSpacing

Specifies a blank space between legend rows in pixels.

Type:

Number

Default Value: 8

verticalAlignment

Specifies a legend's position on the chart.

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.

visible

Specifies the visibility state of the chart's legend.

Type:

Boolean

Default Value: true