We just shipped Web.UI 2009.3, which introduces the Silverlight Charting control.  Besides the obvious advantages of client-side rendering and many new look and animation related configurations, the Chart control still offers many of the standard features of our ASP.NET Charting control.  One of these features is the ability to customize the axis annotation.

Customizing The Primary Axis Annotation

Lets start with a chart that shows a count and sales values for each month of the year.  In our code-behind we can define a SalesItem class and then create a static data source with the following code:

public MainPage()
{
    InitializeComponent();

    SalesItem[] salesData = new SalesItem[] 
    {
        new SalesItem() { Month = "Jan", Count=123, Sales=23618 },
        new SalesItem() { Month = "Feb", Count=218, Sales=28900 },
        new SalesItem() { Month = "Mar", Count=200, Sales=15000 },
        new SalesItem() { Month = "Apr", Count=189, Sales=22300 },
        new SalesItem() { Month = "May", Count=150, Sales=19000 },
        new SalesItem() { Month = "Jun", Count=249, Sales=18500 },
        new SalesItem() { Month = "Jul", Count=98,  Sales=12234 },
        new SalesItem() { Month = "Aug", Count=139, Sales=15899 },
        new SalesItem() { Month = "Sep", Count=198, Sales=22990 },
        new SalesItem() { Month = "Oct", Count=225, Sales=20000 },
        new SalesItem() { Month = "Nov", Count=156, Sales=14900 },
        new SalesItem() { Month = "Dec", Count=190, Sales=23618 },
    };
    C1.DataSource = salesData;
    C1.Visibility = Visibility.Visible;
}

public class SalesItem
{
    public string Month { get; set; }
    public double Sales { get; set; }
    public int Count { get; set; }
}

In our XAML marukp we can create a chart which just sets the data binding values:

<ch:Chart Name="C1" Width="600" Height="450" ChartKind="Block" XValue="Month" Visibility="Collapsed">
    <!-- Data Series -->
    <ch:Chart.DataSeries >
        <ch:Series Id="Sales" YValue="Sales" >
        </ch:Series>
        <ch:Series Id="Count" YValue="Count" ChartKind="Block" >
        </ch:Series>
        <ch:Series Id="Count2" YValue="Count" ChartKind="Line" >
        </ch:Series>
    </ch:Chart.DataSeries>
</ch:Chart>

This will output the following chart:

Now if we wanted to change the size and color of the Y axis labels and make the labels occur every 5000 units instead of 10,000 we need to explicitly define the Chart.YAxis object.  This can be accomplished by inserting the following code within the Chart control defined above:

<ch:Chart.YAxis>
    <ch:Axis MinorGridLinesStyle="TickMark" LabelsFontSize="12" LabelsFontBrush="DarkRed" >
        <ch:Axis.Annotation>
            <ch:AxisAnnotation>
                <ch:AxisAnnotation.LabelCoordinates>
                    <ch:NumericCoordinates Step="5000"/>
                </ch:AxisAnnotation.LabelCoordinates>
            </ch:AxisAnnotation>
        </ch:Axis.Annotation>
    </ch:Axis>
</ch:Chart.YAxis>

This will produce the following chart:

Independent Y Axis

If we take a closer look at the above chart, we'll notice that the third series (Count2, the blue line) is a almost invisible because its range of values is comparatively small to the range of the Y axis.  We can remedy this situation by making this series have its own Y axis, which we can place on the right hand side of the chart.  To do this, we can define the series' own Y axis in the following way:

<ch:Series Id="Count2" YValue="Count" ChartKind="Line" >
    <ch:Series.YAxis>
        <ch:Axis Position="Right"  UseReferenceValue="True"/>
    </ch:Series.YAxis>
</ch:Series>

This will now show us our line chart like we would expect it: