Axis labels in WinUI Chart

6 Dec 20223 minutes to read

The axis labels are used to show the units, measures, or category values of the axis to visualize the data. It will be generated based on the range and values binded to the series in the chart.

Rotation

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

XAML

<chart:SfPolarChart>
    ...
    <chart:SfPolarChart.SecondaryAxis>
        <chart:NumericalAxis LabelRotation="30"/>
    </chart:SfPolarChart.SecondaryAxis>
    ...
</chart:SfPolarChart>

C#

SfPolarChart chart = new SfPolarChart();
...
chart.PrimaryAxis = new CategoryAxis();
chart.SecondaryAxis = new NumericalAxis()
{
    LabelRotation = 30,
}
...

Format

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

XAML

<chart:SfPolarChart>
            
    <chart:SfPolarChart.PrimaryAxis>
        <chart:CategoryAxis/>
    </chart:SfPolarChart.PrimaryAxis>
                
    <chart:SfPolarChart.SecondaryAxis>
        <chart:NumericalAxis>
            <chart:NumericalAxis.LabelStyle>
                <chart:LabelStyle LabelFormat="0.0" />
            </chart:NumericalAxis.LabelStyle>
        </chart:NumericalAxis>
    </chart:SfPolarChart.SecondaryAxis>
    ...

</chart:SfPolarChart>

C#

SfPolarChart chart = new SfPolarChart();

chart.PrimaryAxis = new CategoryAxis();

chart.SecondaryAxis = new NumericalAxis()
{
    LabelStyle = new LabelStyle() { LabelFormat= "0.0" }
};
...

Template

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

XAML

<Grid x:Name="grid">
    <Grid.Resources>
        <DataTemplate x:Key="labelTemplate">
            <Border Background="Blue"
					CornerRadius="5"
					BorderThickness="1">
                <TextBlock Text="{Binding Content}"
						   Foreground="White"
						   FontStyle="Italic" 
						   FontSize="10"
						   FontWeight="Bold" 
						   Margin="3"/>
            </Border>
        </DataTemplate>
    </Grid.Resources>
    <chart:SfPolarChart x:Name="chart">
    ...
        <chart:SfPolarChart.PrimaryAxis>
            <chart:CategoryAxis LabelTemplate="{StaticResource labelTemplate}"/>
        </chart:SfPolarChart.PrimaryAxis>

        <chart:SfPolarChart.SecondaryAxis>
            <chart:NumericalAxis/>
        </chart:SfPolarChart.SecondaryAxis>
    ...
    </chart:SfPolarChart>
</Grid>

C#

SfPolarChart chart = new SfPolarChart();

chart.PrimaryAxis = new CategoryAxis()
{
    LabelTemplate = grid.Resources["labelTemplate"] as DataTemplate
};

chart.SecondaryAxis = new NumericalAxis();
...