Deborah's Developer MindScape

When displaying a chart, you may want to format the x and y axes. This post covers how to set the axis font color and wrap and angle the text.

This prior post sets the ground work for displaying a chart. This post covers how to format the axis. This example formats the x-axis, but you can use the same technique to format either axis.

NOTE: This post is part of a series that starts with this prior post. The example in this post uses the application that is built as part of that series.

If you have a chart on your page, you already have the necessary namespace:

xmlns:toolkit=
  "http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"

To style the axis, use the CategoryAxis element within the Chart.Axes element. The XAML is shown below.

<toolkit:Chart.Axes>
    <toolkit:CategoryAxis Orientation="X"
                          Location="Bottom"
                          Foreground="White">
        <toolkit:CategoryAxis.AxisLabelStyle>
            <Style TargetType="toolkit:AxisLabel">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate
                              TargetType="toolkit:AxisLabel">
                            <TextBlock
                     Text="{TemplateBinding FormattedContent}"
                                       TextAlignment="Right"
                                       TextWrapping="Wrap"
                                       Width="50"
                                       Margin="-40,-5,0,26"
                                       RenderTransformOrigin="1,.5">
                                    <TextBlock.RenderTransform>
                                        <RotateTransform Angle="300" />
                                    </TextBlock.RenderTransform>
                            </TextBlock>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </toolkit:CategoryAxis.AxisLabelStyle>
    </toolkit:CategoryAxis>
</toolkit:Chart.Axes>

The CategoryAxis element defines the orientation. In this example, the formatting is for the "X" axis. Add a second CategoryAxis element under the Chart.Axes element to format the "Y" axis as well.

The Location property allows you to put the X-axis at the bottom or at the top of the chart. The Foreground property defines the color of the axis text.

The CategoryAxis.AxisLabelStyle allows you to set the template for the axis content. In this example, the style contains a TextBlock, which allows for wrapping and aligning the text.

The Width and Margin adjust the location of the text under the columns. The RenderTransform code angles the text. This is a useful technique if you have text that is long or columns that are close together.

Use this technique any time you want to format or style the chart axes.

Enjoy!