Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

March 5, 2011

Silverlight Charting: Formatting the Tick Marks

Filed under: Silverlight @ 4:53 pm

The tick marks on the charts may not look like much, but they can be helpful to clarifying the meaning of your charts.

By default, the tick marks are small little black lines on each axis that identify the axis "ticks". See the following chart. (I put a red circle around one of them since they are a little hard to see.)

image

This prior post sets the ground work for displaying a chart. This post covers how to format the tick marks on the axes.

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 tick marks, add a CategoryAxis.MajorTickMarkStyle element under 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.MajorTickMarkStyle>
            <Style TargetType="Line">
                <Setter Property="Stroke"
                        Value="White" />
                <Setter Property="StrokeThickness"
                        Value="2" />
                <Setter Property="Y1"
                        Value="0" />
                <Setter Property="Y2"
                        Value="10" />
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <RotateTransform Angle="15" />
                    </Setter.Value>
                </Setter>
            </Style>
        </toolkit:CategoryAxis.MajorTickMarkStyle>
    </toolkit:CategoryAxis>
</toolkit:Chart.Axes>

This code sets the color using the Stroke property and the thickness using the StrokeThickness property. It sets the line start and end using the Y1 and Y2 properties. It then uses RenderTransform to angle the tick mark so it matches nicely with the angled text.

The result is shown below.

image

Use this technique any time you want to control the layout and style of the chart tick marks.

Enjoy!

4 Comments

  1.   Hippie — June 29, 2011 @ 12:12 pm    Reply

    I am totally wowed and prperaed to take the next step now.

  2.   Maneesh — March 13, 2012 @ 11:50 pm    Reply

    How to set the minor tick marks on silverlight 4 chart

  3.   Colonel Tusker — August 14, 2012 @ 8:38 pm    Reply

    Major tickmarks=easy. Major and minor has got me stumped.
    The scenario is a date-time axis for a stockchart.
    what I want (and what was easy in ASP.Net Charting), is:

    ||||||||||||||||||||||||||||||||||||||||||||||||
    | |
    July August

    I can do that easy without the minor ticks, just set Interval=”Months” and away you go.
    Or if I set Interval=”Days” then I get the first line of ticks.
    But to get both? There seemes to be no parameter MajorInterval/ MinorInterval ?
    Many thanks, appreciate the help.

  4.   MoVendra — October 4, 2012 @ 8:59 am    Reply

    To Colonel Tusker:
    you have to add a secondary axis and set interval as you like



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