How to: Provide a Custom Template for Axis Labels

• Apr 15, 2018

The following example demonstrates how to change the appearance of axis labels, for example, to rotate them by a specific angle. To accomplish this, it is necessary to create a DataTemplate that specifies the appearance of axis labels, and add it to a window’s resources collection. Then, this template can be applied to an axis label via its ChartTextElement.ElementTemplate property.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-provide-a-custom-template-for-axis-labels-e1752.

Window1.xaml

<Window x:Class="RotatedAxisXLabels.Window1" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        Title="Rotated AxisX Labels" Height="300" Width="400">

    <Window.Resources>
        <DataTemplate x:Key="AxisXLabelTemplate">
            <ContentPresenter Content="{Binding Path=Content}">
                <ContentPresenter.LayoutTransform>
                    <RotateTransform Angle="-90" />
                </ContentPresenter.LayoutTransform>
            </ContentPresenter>
        </DataTemplate>
    </Window.Resources>

    <Grid>
        <dxc:ChartControl Name="chartControl1">
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram2D>
                    <dxc:XYDiagram2D.AxisX>
                        <dxc:AxisX2D>
                            <dxc:AxisX2D.Label>
                                <dxc:AxisLabel ElementTemplate="{StaticResource AxisXLabelTemplate}" 
                                               Padding="0,0,5,4" />
                            </dxc:AxisX2D.Label>
                        </dxc:AxisX2D>
                    </dxc:XYDiagram2D.AxisX>
                    <dxc:XYDiagram2D.Series>
                        <dxc:BarSideBySideSeries2D>
                            <dxc:BarSideBySideSeries2D.Points>
                                <dxc:SeriesPoint Argument="First Argument" Value="1" />
                                <dxc:SeriesPoint Argument="Second Argument" Value="2" />
                                <dxc:SeriesPoint Argument="Third Argument" Value="3" />
                                <dxc:SeriesPoint Argument="Fourth Argument" Value="4" />
                                <dxc:SeriesPoint Argument="Fifth Argument" Value="5" />
                            </dxc:BarSideBySideSeries2D.Points>
                        </dxc:BarSideBySideSeries2D>
                    </dxc:XYDiagram2D.Series>
                </dxc:XYDiagram2D>
            </dxc:ChartControl.Diagram>
        </dxc:ChartControl>
    </Grid>
</Window>