As my previous blog post mentioned, the sophisticated axis annotation mechanism is one of the most useful features of the Silverlight Chart control released with Web.UI 2009.3.  It allows the programmer to just drop the data into the chart and not worry too much about how the axis annotation labels will be arranged, even with complicated DateTime X values on DataPoints.

However, at times the developer may want to have tighter control over the axis annotation or the grid and strip on the background plane.  In these occasions, it is possible to explicitly define the axis annotation schema on the chart instance being created.  This is done by Setting the Chart.XAxis.Annotation property.

Example

The following code explicitly sets the axis annotation on a chart:

<ch:Chart Name="C4" ChartKind="Block" 
	  XValue="Month"  
	  Height="300" Width="500" >

    <ch:Chart.XAxis>
	<ch:Axis>
	    <ch:Axis.Annotation>
		<ch:AxisAnnotation>
		    <ch:AxisAnnotation.Levels>
			<ch:AxisAnnotationLevel FormattingString="t" Angle="90" />
			<ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Day" FormattingString="D" />
		    </ch:AxisAnnotation.Levels>
		    <ch:AxisAnnotation.LabelCoordinates>
			<ch:DateTimeCoordinates DateLevel="Minute" Step="5"/>
		    </ch:AxisAnnotation.LabelCoordinates>
		    <ch:AxisAnnotation.MajorGridLineCoordinates>
			<ch:DateTimeCoordinates DateLevel="Minute" Step="10"/>
		    </ch:AxisAnnotation.MajorGridLineCoordinates>
		</ch:AxisAnnotation>
	    </ch:Axis.Annotation>
	</ch:Axis>
    </ch:Chart.XAxis>

    <ch:Chart.DataSeries >
	<ch:Series Id="Sales" YValue="Sales" />
    </ch:Chart.DataSeries>
</ch:Chart>

In our schema for the axis annotation, we enforce the following rules for the X Axis annotation:

• Axis annotations will have two levels
• The first level will display the short time pattern ("t" format string for DateTime) and be displayed vertically (90 degree angle)
• The second Level will display a single label for all annotations from the above level that fall on the same day.  It will output the long date pattern ("D" format string).
• There will be an axis annotation every 5th minute.
• There will be vertical Major Grid Line every 10th minute

This will produce the following chart:

Additionally, the following attributes of the axis annotation can be controlled through the schema:

• Instead of the Step property of a numeric or DateTime coordinate, you can set the actual values at which the labels (or grid lines) will occur.  This is provided in a comma delimited list set in the Values attribute.  For example:

      <ch:AxisAnnotation.LabelCoordinates>
          <ch:DateTimeCoordinates DateLevel="Hour"  DisplayValues="0,2,4,6,8,10,12,14,16,18,20,22"/>
      </ch:AxisAnnotation.LabelCoordinates>

• With numeric coordinates, you can specify one of NumberOfPointsAtLeast or NumberOfPointsAtMost attribute.  This will let an internal algorithm calculate the frequency of the labels or grid lines while ensuring that there are at least (or at most) number of points that are specified:

      <ch:AxisAnnotation.MajorGridLineCoordinates>
          <ch:NumericCoordinates NumberOfPointsAtLeast="4"/>
      </ch:AxisAnnotation.MajorGridLineCoordinates>

For more examples and ideas on how to customize axis annotation schemes, take a look at the tutorial that shows the image output of all existing themes along with their code.