Axis Custom Label

• May 22, 2020
• 2 minutes to read

The DXCharts Suite provides two types of axis labels: default and custom. In addition, axis labels support an algorithm that prevents label overlapping during resizing.

This document consists of the following sections.

• Custom Axis Labels
• Resolve Overlapping for Axis Labels

Custom Axis Labels

Custom Axis Labels can be used to display custom text along an axis. If custom labels are provided for an axis, its automatically generated default labels are not displayed.

The table below lists the main properties that affect element appearance and functionality.

Availability	Axis2D.CustomLabels
Appearance	Foreground, FontFamily, FontSize, FontWeight, FontStyle, FontStretch, ChartTextElement.ElementTemplate
Position	CustomAxisLabel.Value
Contents	CustomAxisLabel.Content
Visibility	CustomAxisLabel.Visible

Resolve Overlapping for Axis Labels

There are situations when axis labels don't have enough space to represent all the information, for example, of a series argument.

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

Note that you don't need to write any lines of code to enable this feature, because all the necessary options (axis labels rotating, staggering and hiding during chart's resizing) are enabled, by default.

You can use the properties of the AxisLabelResolveOverlappingOptions object to customize the way the resolve overlapping operates for axis labels. This object can be accessed via the Axis2D.ResolveOverlappingOptions attached property.

The following XAML demonstrates how it can be done:

XAML

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" 
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts">

    <Grid x:Name="LayoutRoot" Background="White">
        <dxc:ChartControl>
            <dxc:XYDiagram2D>
                <dxc:XYDiagram2D.AxisX>
                    <dxc:AxisX2D>
                        <dxc:AxisX2D.Label>
                            <dxc:AxisLabel>
                                <dxc:Axis2D.ResolveOverlappingOptions>
                                    <dxc:AxisLabelResolveOverlappingOptions />
                                </dxc:Axis2D.ResolveOverlappingOptions>
                            </dxc:AxisLabel>
                        </dxc:AxisX2D.Label>
                    </dxc:AxisX2D>
                </dxc:XYDiagram2D.AxisX>
                <dxc:BarSideBySideSeries2D>
                    <dxc:SeriesPoint Argument="1/1/ 12:00" Value="40" />
                    <dxc:SeriesPoint Argument="1/1/ 15:00" Value="45" />
                    <dxc:SeriesPoint Argument="1/1/ 18:00" Value="48" />
                    <dxc:SeriesPoint Argument="1/2/ 12:00" Value="32" />
                    <dxc:SeriesPoint Argument="1/2/ 15:00" Value="37" />
                    <dxc:SeriesPoint Argument="1/2/ 18:00" Value="31" />
                    <dxc:SeriesPoint Argument="1/3/ 12:00" Value="33" />
                    <dxc:SeriesPoint Argument="1/3/ 15:00" Value="29" />
                    <dxc:SeriesPoint Argument="1/3/ 18:00" Value="43" />
                    <dxc:SeriesPoint Argument="1/4/ 12:00" Value="47" />
                    <dxc:SeriesPoint Argument="1/4 15:00"  Value="51" />
                    <dxc:SeriesPoint Argument="1/4/ 18:00" Value="45" />
                </dxc:BarSideBySideSeries2D>
            </dxc:XYDiagram2D>
        </dxc:ChartControl>
    </Grid>
</UserControl>

To customize the resolve overlapping algorithm, use the following properties:

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 a value indicating 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.