Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
  [Expand]Reporting
  [Collapse]Chart Control
   [Expand]Product Information
   [Expand]Getting Started
   [Expand]Fundamentals
   [Collapse]Concepts
    [Expand]Creating Charts
    [Collapse]Chart Elements
     [Expand]Series
     [Expand]Diagram
     [Expand]Axes
     [Expand]Panes
     [Collapse]Legend
       Legend Overview
       Legend Alignment and Layout
       Legend Appearance
     [Expand]Chart Titles
     [Expand]Annotations
     [Expand]Indicators
    [Expand]End-User Interaction
     Supported Browsers
     Adding a Web Chart
     Handling Client-side Scripts
     Medium Trust Support
     Web Farm and Web Gardens Support
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Expand]Examples
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Site Navigation and Layout
  [Expand]File Management
  [Expand]Multi-Use Site Controls
  [Expand]Scheduler
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gauges
  [Expand]Data Editors
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Legend Alignment and Layout

This document describes how the legend can be positioned within a chart's area, and how the layout of legend items can be adjusted.

This document consists of the following sections.

Expanded Legend Positioning

The spacing between the legend's edge and other chart elements (the diagram and chart titles) is determined by the Legend.Margins property.

The horizontal and vertical alignment of the legend within a chart is determined by the Legend.AlignmentHorizontal and Legend.AlignmentVertical properties. These properties allow you to place the legend inside or outside the diagram. The following images provide some examples of how these properties work.

AlignmentHorizontal = RightOutside
AlignmentVertical = TopOutside

AlignmentHorizontal = Right
AlignmentVertical = Top

You can control the size of the legend relative to the diagram's size, via the Legend.MaxHorizontalPercentage and Legend.MaxVerticalPercentage properties. They determine the maximum size of the legend compared to an overall dimension of the chart (its width or height), as a percentage. So, for example, using these properties you can restrict the legend's size to a half of the chart's size, with no matter how many items there are in the legend. The following images demonstrate these properties in action.

MaxHorizontalPercentage = 100

MaxHorizontalPercentage = 60

MaxVerticalPercentage = 100

MaxVerticalPercentage = 60

Use care in specifying both these properties simultaneously, as too small a legend size may cause the legend items to not fit into the available dimensions, and be cut.

As shown in the images above, the legend's items are broken into multiple columns, to fit its reduced size. This may cause the items to shift across each other due to their different lengths. In this case (when the Legend.Direction property is set to either LeftToRight or RightToLeft), you can use the Legend.EquallySpacedItems property, which makes the space between items equal, with no regard to the length of each item. This gives a more professional look to the chart. The following images demonstrate this property in action.

EquallySpacedItems = false

EquallySpacedItems = true

Expanded Legend Items Layout

To define the direction in which the legend items are arranged, use the Legend.Direction property. The following images demonstrate its various settings.

Direction = TopToBottom

Direction = LeftToRight

Note that the items are arranged in a single row only if this is possible according to the chart's size (or, by the legend's Legend.MaxVerticalPercentage and Legend.MaxHorizontalPercentage properties' settings). Otherwise, the items are arranged into columns.

The spacing between the legend's edge and its items is determined by the Legend.Padding property.

The spacing between the legend items is determined by the Legend.HorizontalIndent and Legend.VerticalIndent properties. The following image demonstrates them in action.

HorizontalIndent

VerticalIndent

And, the spacing between a marker and its text is adjusted via the Legend.TextOffset property.

The visibility of markers and their text is determined by the Legend.MarkerVisible and Legend.TextVisible properties, respectively. When both these properties are disabled, the legend becomes invisible.

Expanded See Also

How would you rate this topic?​​​​​​​