Axis Labels

• Jun 16, 2022
• 6 minutes to read

This topic describes how to display and customize axis labels. Before you proceed with this section, you may wish to review the following help topic on axis fundamentals: Axes Overview.

There are two types of axis labels available in the ASP.NET Chart Control: default and custom. It is also possible to obtain an individual axis label item at runtime. In addition, axis labels support an algorithm that prevents label overlap when a chart is resized.

The document consists of the following sections.

• Default Axis Labels
• Custom Axis Labels
• Axis Label Item
• Format Axis Labels
• Resolve Axis Label Overlap

Default Axis Labels

The default axis labels represent text values for major tickmarks of a diagram’s axes.

Axis labels are generated automatically based on the scale type of the axis to which they belong.

Note

To organize the default axis labels in a custom order when the qualitative scale type is specified, create a static series with points that correspond to the required axis values. Then, arrange points within the series in the required order, and set this series as the first item in the chart’s series collection.

You can use the Axis2D.Label property to customize axis label appearance. The AxisLabel.TextPattern property allows you to format the axis label text.

Note

Appearance properties affect both default and custom axis labels, with the exception of the AxisLabel.TextPattern property. This property has no effect on custom labels.

Custom Axis Labels

In addition to default axis labels, you can also add custom labels.

An individual custom label is an instance of the CustomAxisLabel class. Use the Axis2D.CustomLabels property to access the CustomAxisLabelCollection that stores axis custom labels. If the collection is empty (or does not contain any visible custom labels), the chart control shows default axis labels.

Follow the steps below to add custom labels to an axis at design time:

1. Locate the Axis2D.CustomLabels property in the Properties window and click its ellipsis button.

   

2. This invokes the Custom Axis Label Collection Editor.

   

3. In this dialog, click Add to create a custom label, and customize its CustomAxisLabel.AxisValue and ChartElementNamed.Name properties.

   

   Note that to display a custom label on a diagram, the CustomAxisLabel.AxisValue property value should be within the range specified by the AxisBase.WholeRange property.

   Finally, click Close, to apply the changes and quit the dialog.

Since most appearance settings for custom axis labels are defined by the Axis2D.Label property, custom axis labels share appearance settings with the default axis labels.

Note

If the CustomLabels collection does not contain visible custom labels (CustomAxisLabel.Visible is set to true), default axis labels are shown. Set the Axis2D.LabelVisibilityMode property to AutoGeneratedAndCustom to display custom and default labels simultaneously.

Axis Label Item

There is the capability to obtain an individual axis label at runtime for both default and custom axis labels in the specific WebChartControl.CustomDrawAxisLabel event.

For example, it may be required to customize the appearance of axis labels, based on their values. So, to achieve this, handle the event listed above, and write the required condition in its handler. The result is shown in the following image.

Refer to the following help topic to view a code example: How to: Individually Customize Axis Labels.

Format Axis Labels

Use the AxisLabel.TextPattern property to apply a date-time format to axis labels. At design time, after you select the required axis, you can find this property in the Properties window.

This property defines a pattern to display text by series label. Various placeholders enclosed in braces correspond to the available display patterns.

The following placeholders are available:

Pattern	Description
{A}	Displays a series point argument.
{V}	Displays series point values.
{VP}	Displays series point values as percentages (for Pie 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.

See the following help topic to learn more: Format Specifiers.

You can also use the Pattern Editor to specify a pattern. The editor contains numerous predefined chart placeholders with date-time, numeric, percentage, 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. The tab is located in the “Point Labels” section of the Chart Wizard.

Resolve Axis Label Overlap

There are scenarios when an axis label does not have enough space to display its contents, (e.g., for series argument labels).

The resolve overlap algorithm allows you to accomplish this task for axis labels.

Note that all required options (which allow you to rotate, stagger and hide axis labels) are already enabled, so you do not need to write any lines of code.

You can use the AxisLabelResolveOverlappingOptions object’s properties to customize the way axis label overlap is resolved. Use the AxisLabel.ResolveOverlappingOptions property to access this object.

The following table lists properties that can be used to customize the resolve overlap algorithm:

Member	Description
AxisLabelResolveOverlappingOptions.AllowHide	Gets or sets a value indicating whether or not to hide axis labels when resolving any overlap.
AxisLabelResolveOverlappingOptions.AllowRotate	Gets or sets the value that indicates whether or not to rotate axis labels when resolving overlapping labels.
AxisLabelResolveOverlappingOptions.AllowStagger	Gets or sets a value indicating whether or not to stagger axis labels when resolving overlapping labels.
AxisLabelResolveOverlappingOptions.MinIndent	Gets or sets the minimum indent between adjacent axis labels, when an overlap resolution algorithm is applied to them.