legend

Specifies the options of a chart's legend.

Type: Object

The PolarChart 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.

Show Example:
jQuery

In this example, the legend is bordered.


                                    

                                    

backgroundColor

Specifies a color for the legend's background.

Type: String
Default Value: undefined

Show Example:
jQuery

In this example, the legend's backgroundColor option is set to lightyellow.


                                    

                                    

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.

Show Example:
jQuery

In this example, the legend items are displayed in two columns.


                                    

                                    

columnItemSpacing

Specifies a blank space between legend columns in pixels.

Type: Number
Default Value: 8

Show Example:
jQuery

Move the slider at the bottom to change the legend's columnItemSpacing value.


                                    

                                    

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 that corresponds to the legend item.

Object structure:
seriesName: any

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

seriesIndex: Number

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

seriesColor: String

The color of the series.

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.

Show Example:
jQuery

In this example, hover over a legend item to see the hint.


                                    

                                    

customizeText

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

Type: function
Function parameters:
seriesInfo: Object

Information about the series to be presented in the legend

Object structure:
seriesName: any

Specifies the name of the series for which the current legend item is created.

seriesIndex: Number

Specifies the index of the series for which the current legend item is created.

seriesColor: String

Specifies the color of the series for which the current legend item is created.

Return Value: String

The text to be displayed by a legend item.

Cannot be used in themes.

By default, legend items identify series by color and name. You can also provide other information instead of the series name. To do this, implement a callback function for this property, and return the required text. Use the fields of the object passed as the function's parameter in the returned text. For instance, you can use the series name or index if it is more appropriate in your case.

Alternatively, you can use the this object within the function. This object has the same structure as the object passed as a parameter.

Show Example:
jQuery

In the example below, additional text is added to the legend item values using the customizeText option.


                                    

                                    

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: 'right' | 'center' | 'left'

When configuring the widget using ASP.NET MVC Wrappers, specify this option using the HorizontalAlignment enum. This enum accepts the following values: Left, Center and Right.

Show Example:
jQuery

Use the drop-down list below to change the legend's horizontalAlignment option.


                                    

                                    

hoverMode

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

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

In the PolarChart 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.

When configuring the widget using ASP.NET MVC Wrappers, specify this option using the ChartLegendHoverMode enum. This enum accepts the following values: IncludePoints, ExcludePoints and None.

Show Example:
jQuery

Change the value of the legend's hoverMode option using the drop-down list below, and hover over one of the legend items to see the effect.


                                    

                                    

itemsAlignment

Specifies the alignment of legend items.

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

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

When configuring the widget using ASP.NET MVC Wrappers, specify this option using the HorizontalAlignment enum. This enum accepts the following values: Left, Center and Right.

Show Example:
jQuery

Use the drop-down list below to change the itemsAlignment option.


                                    

                                    

itemTextPosition

Specifies the position of text relative to the item marker.

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

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 how the text should be positioned relative to the item marker.

Show Example:
jQuery

Use the drop-down list below to change the itemTextPosition option.


                                    

                                    

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

Show Example:
jQuery

In this example, the size of the legend item markers is altered to 30.


                                    

                                    

orientation

Specifies whether to place legend items horizontally or vertically.

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

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.

When configuring the widget using ASP.NET MVC Wrappers, specify this option using the Orientation enum. This enum accepts the following values: Horizontal and Vertical.

Show Example:
jQuery

Use the drop-down list below to change the legend's orientation option.


                                    

                                    

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

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.

Show Example:
jQuery

In this example, legend items are displayed in two rows. In addition, the legend position on a chart is changed using the horizontalAlignment and veticalAlignment options, and the position of the legend item text is changed using the itemTextPosition option.


                                    

                                    

rowItemSpacing

Specifies a blank space between legend rows in pixels.

Type: Number
Default Value: 8

Show Example:
jQuery

Move the slider at the bottom to change the legend's rowItemSpacing value.


                                    

                                    

verticalAlignment

Specifies a legend's position on the chart.

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

When configuring the widget using ASP.NET MVC Wrappers, specify this option using the VerticalEdge enum. This enum accepts the following values: Top and Bottom.

Show Example:
jQuery

Use the drop-down list below to change the legend's verticalAlignment option.


                                    

                                    

visible

Specifies the visibility state of the chart's legend.

Type: Boolean
Default Value: true

Show Example:
jQuery

Use the check box at the bottom to change legend visibility.