Axis Labels in WinUI Chart

18 Nov 201810 minutes to read

Axis labels are used to show the units, measures, or category values of the axis to visualize the data in a user-friendly way. It will be generated based on the range and the values bound to the XBindingPath or YBindingPath properties of the series.

Rotation Angle

The LabelRotation property is used to define the angle for the label content.

<chart:SfCartesianChart>

    <!-- Configure additional chart elements -->
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis LabelRotation="90"/>
    </chart:SfCartesianChart.XAxes>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

// Configure additional chart elements
CategoryAxis primaryAxis = new CategoryAxis()
{
    LabelRotation = 90
};
chart.XAxes.Add(primaryAxis);

Axis label rotation angle in WinUI Chart

Format

Axis labels can be formatted using predefined formatting types with the LabelFormat property based on the axis type.

DateTimeAxis

<chart:SfCartesianChart>

   <!-- Configure additional chart elements -->
    <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis>
            <chart:DateTimeAxis.LabelStyle>
                <chart:LabelStyle LabelFormat="MMM-yy"/>
            </chart:DateTimeAxis.LabelStyle>
        </chart:DateTimeAxis>
    </chart:SfCartesianChart.XAxes>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

// Configure additional chart elements
DateTimeAxis primaryAxis = new DateTimeAxis()
{
    LabelStyle = new LabelStyle() { LabelFormat= "MMM-yy" }
};
chart.XAxes.Add(primaryAxis);

NumericalAxis

<chart:SfCartesianChart>
    
    <!-- Configure additional chart elements -->
    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis>
            <chart:NumericalAxis.LabelStyle>
                <chart:LabelStyle LabelFormat="0.00"/>
            </chart:NumericalAxis.LabelStyle>
        </chart:NumericalAxis>
    </chart:SfCartesianChart.YAxes>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

// Configure additional chart elements
NumericalAxis secondaryAxis = new NumericalAxis()
{
    LabelStyle = new LabelStyle() { LabelFormat= "0.00" }
};
chart.YAxes.Add(secondaryAxis);

Axis labels formatting support in WinUI Chart

Template

The appearance of the axis labels can be customized by using the LabelTemplate property of axis.

<chart:SfCartesianChart>
    <chart:SfCartesianChart.Resources>
        <DataTemplate x:Key="labelTemplate" x:DataType="chart:ChartAxisLabel">
            <Border 
                BorderBrush="Blue"
                CornerRadius="5"
                BorderThickness="1">
                <TextBlock 
                    Text="{Binding Content}"
                    FontSize="12"
                    FontStyle="Italic"
                    FontWeight="Bold" 
                    Margin="3"/>
            </Border>
        </DataTemplate>
    </chart:SfCartesianChart.Resources>
    
    <!-- Configure additional chart elements -->
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis LabelTemplate="{StaticResource labelTemplate}"/>
    </chart:SfCartesianChart.XAxes>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

// The 'labelTemplate' resource is defined in XAML Resources and referenced here.
CategoryAxis primaryAxis = new CategoryAxis()
{
    LabelTemplate = chart.Resources["labelTemplate"] as DataTemplate
};
chart.XAxes.Add(primaryAxis);

Axis LabelTemplate support in WinUI Chart

NOTE

The binding context for the LabelTemplate is ChartAxisLabel, which provides the necessary data for the axis labels.

Label Extent

The LabelExtent property allows you to set the distance between the axis header and the axis.

<chart:SfCartesianChart>

    <!-- Configure additional chart elements --> 
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis Header="Demand" LabelExtent="50"/>
    </chart:SfCartesianChart.XAxes>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

NumericalAxis primaryAxis = new NumericalAxis()
{
    Header = "Demand",
    LabelExtent = 50
};
chart.XAxes.Add(primaryAxis);

LabelExtent support for ChartAxis in WinUI Chart

Smart Axis Labels

When there are a large number of axis labels, they may overlap with each other. The chart axis provides support to handle overlapping axis labels using the LabelsIntersectAction property. By default, the LabelsIntersectAction value is Hide.

Actions Description
None Used to display all the label even if it intersects
Hide Used to hide the labels if it intersects
MultipleRows Used to move the labels to next row if it intersects
Auto Used to rotate the labels if it intersects

Hide

Smart axis labels support in WinUI Chart

MultipleRows

Smart axis labels support in WinUI Chart

Auto

Smart axis labels support in WinUI Chart

Edge Labels Drawing Mode

The chart axis provides support to customize the rendering position of the edge labels using the EdgeLabelsDrawingMode property. The default value of the EdgeLabelsDrawingMode property is Center.

Action Description
Center Positions the label with tick line as center.
Fit Positions the gridline inside based on the edge label size.
Hide Hides the edge labels.
Shift Shifts the edge labels to the left or right so that they come inside the chart area. 
<chart:SfCartesianChart>
    
    <!-- Configure additional chart elements -->
    <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis EdgeLabelsDrawingMode="Shift"/>
    </chart:SfCartesianChart.XAxes>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

// Configure additional chart elements
DateTimeAxis primaryAxis = new DateTimeAxis()
{
    EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Shift
};
chart.XAxes.Add(primaryAxis);

Axis edge label positioning support in WinUI Chart

Edge Labels Visibility

The visibility of the edge labels of the axis can be controlled using the EdgeLabelsVisibilityMode property. The default value of EdgeLabelsVisibilityMode is Default, which displays the edge labels based on auto interval calculations.

Always Visible

The AlwaysVisible option in EdgeLabelsVisibilityMode is used to view the edge labels even when the chart area is in a zoomed state.

<chart:SfCartesianChart>

    <!-- Configure additional chart elements -->
    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis EdgeLabelsVisibilityMode="AlwaysVisible"/>
    </chart:SfCartesianChart.XAxes>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

// Configure additional chart elements
NumericalAxis primaryAxis = new NumericalAxis()
{
    EdgeLabelsVisibilityMode = EdgeLabelsVisibilityMode.AlwaysVisible
};
chart.XAxes.Add(primaryAxis);

Visible

Visible option is used to display the edge labels irrespective of the auto interval calculation until zooming (i.e., in normal state).

<chart:SfCartesianChart>

    <!-- Configure additional chart elements -->
    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis EdgeLabelsVisibilityMode="Visible"/>
    </chart:SfCartesianChart.XAxes>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

// Configure additional chart elements
NumericalAxis primaryAxis = new NumericalAxis()
{
    EdgeLabelsVisibilityMode = EdgeLabelsVisibilityMode.Visible
};
chart.XAxes.Add(primaryAxis);

See Also