How to: Customize Axis Labels

• Oct 27, 2020

You can specify label properties or define a data template for axis labels to change their appearance.

This example specifies the following properties for X-axis labels: Angle, Background, FontSize, FontStyle, FontWeight, Foreground, and TextPattern.

The example defines a data template for Y-axis labels. Assign this template to the ElementTemplate property to apply it to labels.

XAML

<Window.Resources>
        <DataTemplate x:Key="AxisXLabelTemplate">
            <Border BorderThickness="1" CornerRadius="9" Opacity="1.0">
                <Border.Background>
                    <SolidColorBrush Color="Orange"/>
                </Border.Background>
                <Label Content="{Binding Path=Content}" 
                       Padding="5,1,5,1.5" 
                       Foreground="DarkSlateBlue"
                       FontSize="12" />
            </Border>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <dxc:ChartControl x:Name="chartControl1" Width="540" Height="300" BorderThickness="1">
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram2D>
                    <dxc:XYDiagram2D.AxisX>
                        <dxc:AxisX2D Visible="True">
                            <dxc:AxisX2D.Label>
                                <dxc:AxisLabel Angle="-90"
                                               Background="Orange"   
                                               FontSize="14" 
                                               FontStyle="Italic" 
                                               FontWeight="Bold"
                                               Foreground="DarkSlateBlue"
                                               TextPattern="{}{V} year"/>
                            </dxc:AxisX2D.Label>
                        </dxc:AxisX2D>
                    </dxc:XYDiagram2D.AxisX>
                    <dxc:XYDiagram2D.AxisY>
                        <dxc:AxisY2D>
                            <dxc:AxisY2D.Label>
                                <dxc:AxisLabel ElementTemplate="{StaticResource AxisXLabelTemplate}"/>
                            </dxc:AxisY2D.Label>
                            <dxc:AxisY2D.WholeRange>
                                <dxc:Range  MinValue="450"/>
                            </dxc:AxisY2D.WholeRange>
                        </dxc:AxisY2D>
                    </dxc:XYDiagram2D.AxisY>
                    <!--...-->
                </dxc:XYDiagram2D>
            </dxc:ChartControl.Diagram>
        </dxc:ChartControl>
    </Grid>