Angular Chart - 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.
customizeHint
Name | Type | Description |
---|---|---|
seriesName | any |
The series' name. To get the Series object by this name, call the getSeriesByName(seriesName) method. |
seriesIndex |
The index of the series in the series array. To get the Series object by this index, call the getSeriesByPos(seriesIndex) method. |
|
seriesColor |
The series' color. |
horizontalAlignment
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.
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
.
itemsAlignment
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
.
margin
Specifies the distance between the legend and surrounding widget elements or container borders in pixels.
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.
orientation
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.
paddingTopBottom
Specifies a blank space between a legend's top/bottom boundaries and the inner item boundaries in pixels.
position
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
.
verticalAlignment
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
.
If you have technical questions, please create a support ticket in the DevExpress Support Center.