Series Point Labels
- 9 minutes to read
This document describes how you can add text labels to series points, specify the data they show, and format their output. It describes ways you can resolve label overlap if labels are too long and numerous. In addition, it explains how to access series labels and adjust their appearance.
The topic consists of the following sections.
- Series Point Label Overview
- Access Series Labels
- Resolve Series Label Overlap
- Customize the Series Label Display Format
- Customize the Series Label Layout
- Customize the Series Label Appearance
- Customize Label Text at Runtime
Series Point Label Overview
You can display a series point label (also called a series label) next to each series point.
For series of different view types, points represent different kinds of data. Thus, corresponding series labels can display a point’s value, argument, or both (see How to: Change the Display Format for Series Labels of a Pie Chart). If required, you can also make a label display custom information (see How to: Make Series Labels Display Custom Information) or conditionally control its appearance (see How to: Conditionally Hide Series Labels).
Note
Series point labels are hidden in the ASP.NET Chart control by default (the crosshair cursor is shown instead). To display point labels on a diagram, set the SeriesBase.LabelsVisibility property for the series to true (e.g., LineSeriesView.LabelsVisibility).
Access Series Labels
You can access settings that specify the content, position and appearance of series labels at design time. To do this, click the Series ellipsis button in the Properties window. Then, in the Properties tab of the Series Collection Editor, expand the SeriesBase.Label property.
To access these settings at runtime, use the following code.
SideBySideBarSeriesLabel label = chart.Series[0].Label as SideBySideBarSeriesLabel;
if (label != null) {
label.Position = BarSeriesLabelPosition.Top;
}
Note that the set of available options is specific to each series view type. For the purpose of simplicity, and since Line is one of the most popular view types, we use it in this topic to describe the series label functionality.
Series label options have two types of settings. See the corresponding section for details.
- Settings that resolve series label overlap (Resolve Series Label Overlap);
- Settings related to the series label appearance (Customize the Series Label Appearance).
Resolve Series Label Overlap
Series labels may overlap in the following cases:
- when there are too many data points in a series;
- when series arguments or values are too long.
In these situations, you can use the ASP.NET Chart Control’s resolve overlap algorithm (which depends on the series view) to meet specific requirements. This feature is available for both 2D and 3D series view types.
Note that series labels are hidden (the default setting), and a crosshair cursor is available to improve performance and efficiency when interacting with large data sets. In addition, you can use the WebChartControl.ToolTipEnabled property to display chart tooltips when a mouse pointer moves over a series point. To learn more, see the following help topic: Tooltips.
Set the SeriesLabelBase.ResolveOverlappingMode property to a value other than None to enable the overlap resolve feature. The available modes are described below.
Note
For the Pie series, the SeriesLabelBase.ResolveOverlappingMode property can be accessed only if their PieSeriesLabel.Position property is set to either PieSeriesLabelPosition.TwoColumns, or to PieSeriesLabelPosition.Outside.
The overlap resolution modes are available selectively for different series view types. Moreover, the same mode may be implemented differently to meet the specific requirements of a series view type.
The following table demonstrates the availability of these modes for different series view types.
| Mode | Description | Series View Type |
|---|---|---|
| Default | This algorithm randomly repositions labels to avoid overlapping labels. This mode only changes the position of labels that are overlapped. | All view types, based on the view type’s specifics. |
| HideOverlapped | In this mode, if two or more labels overlap, some of them are automatically hidden to avoid overlap. | All view types, with the exception of the Pie, Doughnut and Funnel series. |
| JustifyAroundPoint | Only labels that overlap change their position. They are repositioned relative to the corresponding point, while the indent from the point is preserved. This mode only changes the position of labels that overlap. | This mode supports series view types that display a data point as a point. This encompasses all view types, with the exception of the Pie and Doughnut, Gantt, Bar and Column, Bubble, and Stock series. |
| JustifyAllAroundPoint | All labels (both overlapping and non-overlapping) change their position. They are repositioned relative to the corresponding point, while the indent from the point is preserved. | This mode supports series view types that display a data point as a point. This encompasses all view types, with the exception of the Pie and Doughnut, Gantt, Bar and Column, Bubble, and Stock series. |
After the overlap resolve mode is activated, the SeriesLabelBase.ResolveOverlappingMinIndent property is in effect. You can use this property to determine the minimum indent between two adjacent series point labels. Note that this property is synchronized to affect all series, so if you set this property for one series, it will apply changes to all series within the chart. This option is not available for the Pie and Doughnut, Bubble and Stock series.
The following images demonstrate the ResolveOverlappingMinIndent property in action (with the SeriesLabelBase.ResolveOverlappingMode set to JustifyAroundPoint).
| ResolveOverlappingMinIndent = -1 | ResolveOverlappingMinIndent = 10 |
|---|---|
 |
 |
Note
Data Point Markers are hidden in the ASP.NET Chart control by default. If you wish to display markers on a diagram, set the MarkerVisibility property for a particular series to true (e.g., LineSeriesView.MarkerVisibility).
Customize the Series Label Display Format
Since series labels display the underlying series point data, you can use the SeriesLabelBase.TextPattern property to format this data. This property uses placeholders (enclosed in braces) to define a formatting pattern for series label text.
The available placeholders are as follows.
| Pattern | Description |
|---|---|
| {A} | Displays a series point argument. |
| {V} | Displays series point values. |
| {VP} | Displays series point values as percentages (for a Pie series and Full-Stacked series views). |
| {S} | Displays the name of the series. |
| {G} | Displays the name of a stacked group. |
| {W} | Displays the weight (for a Bubble series). |
| {V1} | Displays the first value (for a Range series). |
| {V2} | Displays the second value (for a Range series). |
| {HV} | Displays the high value (for a Financial series). |
| {LV} | Displays the low value (for a Financial series). |
| {OV} | Displays the open value (for a Financial series). |
| {CV} | Displays the close value (for a Financial series). |
| {HINT} | Displays a hint for a series point. |
You can use standard and custom format specifiers along with placeholders to format numeric and date-time values (e.g., “{A}: {V:F1}”).
The result is shown below.
To learn more, see the following help topic: Format Specifiers.
Additionally, you can use the Pattern Editor to specify a pattern. This editor contains numerous predefined chart placeholders with date-time, numeric, percent, currency, and other special formats that allow you to create a text pattern.
To invoke the editor, click the SeriesLabelBase.TextPattern property’s ellipsis button in the Properties window.
You can also customize the text pattern in the “Text Pattern” tab, which is located in the “Point Labels” Chart Wizard section.
The image below shows the Pattern Editor invoked for the SeriesLabelBase.TextPattern property.
Customize the Series Label Layout
The following layout options are available for labels of the Bar and Column series view types.
The BarSeriesLabel.ShowForZeroValues property determines whether labels should be displayed for zero data point values.
| ShowForZeroValues = true | ShowForZeroValues = false |
|---|---|
 |
 |
The SeriesLabelBase.TextOrientation property specifies text direction within series labels.
| TextOrientation = Horizontal | TextOrientation = TopToBottom | TextOrientation = BottomToTop |
|---|---|---|
 |
 |
 |
The BarSeriesLabel.Position property determines the position of series point labels, relative to their corresponding Bars. The BarSeriesLabel.Indent property specifies the indent between labels and their corresponding Bars.
| Position = Auto | Position = Center | Position = Top |
|---|---|---|
|
|
 |
| Position = BottomInside | Position = TopInside |
|---|---|
 |
 |
Gantt and Range Bar series have specific options to meet the requirements of these view types: the RangeBarSeriesLabel.Indent, RangeBarSeriesLabel.Kind and RangeBarSeriesLabel.Position properties.
For the Bubble series, the following layout options are available:
- The BubbleSeriesLabel.IndentFromMarker property, which is available when the PointSeriesLabel.Position property is set to Outside. It determines the indent between a marker’s edge and its label;
- The SeriesLabelBase.TextPattern property, which specifies the pattern for series labels to display a point’s Weight, Value or both.
For the Pie and Doughnut series, you can use the PieSeriesLabel.Position property to organize series labels in two columns, on either side of the series.
Use the PointSeriesLabel.Angle property to define the angle value of labels relative to the corresponding data points. The angle is measured in degrees, in a counterclockwise direction from the series point’s horizontal plane.
| Angle = 45 | Angle = 0 | Angle = -60 |
|---|---|---|
 |
 |
 |
Note
This option is not available in the ResolveOverlappingMode.JustifyAllAroundPoint mode, and for certain series view types, such as Pie and Doughnut and Stock. For the Bubble series, it is available when the PointSeriesLabel.Position property is set to Outside.
Customize the Series Label Appearance
The set of appearance options available for series labels varies, depending on the series view type. The most common options are listed below.
- The following properties control the Font options of series labels: SeriesLabelBase.Font, SeriesLabelBase.EnableAntialiasing, and SeriesLabelBase.TextColor.
- The following properties control the Label Line options of series labels: SeriesLabelBase.LineColor, SeriesLabelBase.LineLength, SeriesLabelBase.LineStyle and SeriesLabelBase.LineVisibility.
- The following properties control the Appearance options of series labels: SeriesBase.LabelsVisibility, SeriesLabelBase.BackColor, SeriesLabelBase.FillStyle, SeriesLabelBase.Border and SeriesLabelBase.Shadow.
Customize Label Text at Runtime
You can handle the WebChartControl.CustomDrawSeriesPoint event to conditionally change label text. The example below hides labels with values less than five.
protected void WebChartControl1_CustomDrawSeriesPoint(object sender, CustomDrawSeriesPointEventArgs e) {
if (e.SeriesPoint.Values[0] < 5) {
e.LabelText = String.Empty;
}
}