legend

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.

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

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

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.

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.

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.

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.

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.

View Demo

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.

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.

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.

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.

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

When configuring the widget using ASP.NET MVC Wrappers, specify this option using the RelativePosition enum. This enum accepts the following values: Inside and Outside.

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

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.