Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

March 5, 2011

Silverlight Charting: Formatting the Axis

Filed under: Silverlight @ 3:41 pm

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.

image

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!

4 Comments

  1.   Hari Iyer — July 6, 2011 @ 5:01 pm    Reply

    Hi Deb,
    Great articles for a newbie like me. much appreciated!!. I tried the following and the Y axes reflected no change in color. It to moved to the right next to the Legend. Any pointers for me?
    Best
    Hari

  2.   Kian Ann — October 26, 2011 @ 9:55 pm    Reply

    Hi Deb,

    Thanks for sharing. I face the same problem as Hari experienced.
    Any idea what’s wrong with the Y-axis?

    Thanks in advance.

    Regards,
    Kian

  3.   Kian Ann — October 26, 2011 @ 9:59 pm    Reply

    Hi all,

    I think I manage to solve the problem.

    Just change the categoryaxis to linearaxis since most of the time the y-axis is numeric type.

  4.   kt — December 12, 2011 @ 1:01 am    Reply

    Y axis label with % format in silverlight chart like 6.56%

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2018 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs