ComponentArt XY Chart

I am using Visual Studio 2010, Sliverlight 4 and Data Visualization 2010 for Silverlight Tools for this programming. Create a new Sliverlight Project as below

Once the Visual Studio settled down, You should be able to see the Toolbox as below. This has all the required Data Visuallization Tools. We just need to drag the control to the design area to have the minimum functionalities.

Below is the screen shot after drag and drop of the XY Chart on the Design pane.

Two namespaces got added to the project. ComponentArt.Silverlight.DataVisualization.Charting and ComponentArt.Silverlight.DataVisualization.Common. The Charting is the namespace for the Chart and the Common has the demodatavalues. Below is the actual XAML code. 

 <UserControl x:Class="XYChart.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" 
    xmlns:my="clr-namespace:ComponentArt.Silverlight.DataVisualization.Charting;assembly=ComponentArt.Silverlight.DataVisualization.Charting" 
    xmlns:my1="clr-namespace:ComponentArt.Silverlight.DataVisualization.Utils;assembly=ComponentArt.Silverlight.DataVisualization.Common">
        <Grid x:Name="LayoutRoot" Width="350"
                                  Height="250">
        <my:XYChart Is3D="True" XPath="X">
            <my:XYChart.DataSource>
                <my1:DemoDataValues>
                    <my1:DemoDataValue X="Jan" Y="20" />
                    <my1:DemoDataValue X="Feb" Y="50" />
                    <my1:DemoDataValue X="Mar" Y="12" />
                    <my1:DemoDataValue X="Apr" Y="25" />
                    <my1:DemoDataValue X="May" Y="43" />
                    <my1:DemoDataValue X="Jun" Y="87" />
                    <my1:DemoDataValue X="Jul" Y="54" />
                    <my1:DemoDataValue X="Aug" Y="34" />
                    <my1:DemoDataValue X="Sep" Y="23" />
                    <my1:DemoDataValue X="Oct" Y="4" />
                    <my1:DemoDataValue X="Nov" Y="78" />
                    <my1:DemoDataValue X="Dec" Y="65" />
                </my1:DemoDataValues>
            </my:XYChart.DataSource>
            <my:BarSeries YPath="Y" />
        </my:XYChart>
    </Grid>
</UserControl>

The running output screen is below. This gives the default required behavior to the control with Data Point Pop-Up, This is a visual pop-up that appears when the mouse hovers over a Data Point. By default it displays the X and Y values of the DataPoint, but its content as well as appearance can be fully customized.

The second images show how to set the chart properties at desgin time. This will let user to Set the Theme, Set the Pallete, Set Animation Properties, Set the Series Style, Configure Data and much more. XY Charts by default uses the same colors for all Series. To have different colors for Series as in Pie Chart, we need to set UseDifferentBarColors property as below and output is shown. 

  <my:XYChart Is3D="True" 
            XPath="X" 
            x:Name="SimpleXYChart" 
			UseDifferentBarColors="True">

Reference Articles