Legend in JavaScript Chart control
18 Nov 20182 minutes to read
The legend provides information about the series rendered in the chart and helps users identify each series by its color, shape, or style.
Position and alignment
By using the position property, the legend can be positioned at the left, right, top, or bottom of the chart. By default, the legend is positioned at the bottom of the chart.
Custom positioning allows the legend to be placed anywhere in the chart using x and y coordinates.
Legend reverse
Use the reverse property to reverse the order of legend items. By default, the legend item for the first series is placed first.
Legend alignment
Align the legend to center, far, or near using the alignment property.
Customization
To change the legend icon shape, use the legendShape property in the series. By default, the legend icon shape is the seriesType.
Legend size
By default, the legend occupies approximately 20%–25% of the chart height when positioned at the top or bottom, and 20%–25% of the chart width when positioned at the left or right. Change the default size using the width and height properties of legendSettings.
Legend item size
Customize the size of legend items using the shapeHeight and shapeWidth properties.
Paging for legend
Paging is enabled automatically when legend items exceed the legend bounds. Navigate between pages using the provided navigation buttons.
Legend text wrap
When legend text exceeds the container, enable wrapping using the textWrap property. Wrapping can also be controlled using the maximumLabelWidth property.
Set the label color based on series color
Set the legend label color based on the series color by using the chart’s loaded event.
Series selection on Legend
By default, clicking a legend item toggles the visibility of its series. To select a series through a legend click, disable toggleVisibility.
Collapsing legend item
By default, the series name is displayed as a legend item. To omit a legend item for a particular series, set the series name to an empty string.
Legend title
Set a title for the legend using the title property in legendSettings. The title can be customized using fontStyle, size, fontWeight, color, textAlignment, fontFamily, opacity, and textOverflow. Use titlePosition to place the title at Top, Left, or Right. The maximumTitleWidth property sets the width of the legend title and defaults to 100px.
Arrow page navigation
When legend paging is enabled, page numbers are shown by default. To display only left and right arrows for navigation, set enablePages to false.
Legend item padding
Use the itemPadding property to adjust the spacing between legend items.
Legend layout
The layout property in legendSettings displays the legend horizontally or vertically. By default, layout is set to Auto. The maximumColumns property defines the maximum number of columns that can be displayed within the available space when using auto layout. Enabling the fixedWidth property ensures that all legend items have equal widths, determined by the maximum item width.
Legend template
Legend templates allow you to replace default legend icons and text with custom HTML for each series. This enables branded styles, richer content (icons, multi-line text, badges), improved readability, and localization.
You can customize the legend items by using the template property of legendSettings. Legend interactions (click to toggle series) remain unless ToggleVisibility is set to false. Templates work with all legend positions, alignments, and paging.
Note: To use legend features, inject the
LegendusingChart.Inject(Legend)method.