This blog post lists all the chart types that Silverlight Chart
supports. They are divided into several sections: bar charts, pie and
doughnut charts, area charts, line charts, marker and bubble charts and
financial charts. Next to each chart type illustration we provide the
XAML code block that generated it.
Bar Charts
The following bar chart types are included: Rectangle, Block, RoundedBlock and Cylinder.
| Code |
Illustration |
<CA:Chart ChartKind="Rectangle" Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
<CA:Chart ChartKind="Block" Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
<CA:Chart ChartKind="RoundedBlock" Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
<CA:Chart ChartKind="Cylinder" Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
Pie/Doughnut Charts
The following pie/doughnut chart types are included: 2D pie, 3D pie, 2D doughnut and 3D doughnut.
| Code |
Illustrations |
<CA:Chart ChartKind="Pie2D" Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
<CA:Chart ChartKind="Pie" Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
<CA:Chart ChartKind="Doughnut2D" Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
<CA:Chart ChartKind="Doughnut" Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
Area Charts
The following area chart types are included: area chart with a
polygonal edge (2D and 3D), area chart with a smooth edge (2D and 3D)
and an area chart with a step edge (2D and 3D).
| Code |
Illustration |
<CA:Chart ChartKind="Area2D" LineKind="Polygon"
Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
<CA:Chart ChartKind="Area2D" LineKind="Smooth"
Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
<CA:Chart ChartKind="Area2D" LineKind="Step"
Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
<CA:Chart ChartKind="Area" LineKind="Polygon"
Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
<CA:Chart ChartKind="Area" LineKind="Smooth"
Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
<CA:Chart ChartKind="Area" LineKind="Step"
Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
Line Charts
The following line chart types are included: line chart with a
polygonal edge (2D and 3D), line chart with a smooth edge (2D and 3D)
and a line chart with a step edge (2D and 3D).
| Code |
Illustration |
<CA:Chart ChartKind="Line" LineKind="Polygon"
Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
<CA:Chart ChartKind="Line" LineKind="Smooth"
Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
 |
<CA:Chart ChartKind="Line" LineKind="Step"
Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
 |
Marker/Bubble Charts
The following marker styles are included: Circle, CircleSimple, Square, SquareSimple, Triange, TriangleSimple, Diamond, DiamondSimple, Plus, PlusSimple, Cross and CrossSimple.
The same marker styles can be used for bubble charts as well.
| Code |
Illustration |
<CA:Chart ChartKind="Marker" Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y" MarkerStyle="Circle"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
<CA:Chart ChartKind="Bubble" Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series YValue="Y" ZValue="Z"
MarkerStyle="Circle"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
Financial Charts
Two kinds of financial charts are supported: Open-High-Low-Close and candlestick.
| Code |
Illustration |
<CA:Chart ChartKind="OpenHighLowClose"
Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series OpenValue="Open" CloseValue="Close"
HighValue="High" LowValue="Low"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
<CA:Chart ChartKind="Candlestick" Width="200" Height="130"
XValue="X" DataSource="{StaticResource DataValues}">
<CA:Chart.DataSeries>
<CA:Series OpenValue="Open" CloseValue="Close"
HighValue="High" LowValue="Low"/>
</CA:Chart.DataSeries>
</CA:Chart>
|
|
The following data was used to generate the illustrations:
<UserControl.Resources>
<Local:DataValueCollection x:Key="DataValues">
<Local:DataValue X="A" Y="90" Z="13" Open="90" Close="120" High="135" Low="85"/>
<Local:DataValue X="B" Y="70" Z="5" Open="115" Close="145" High="145" Low="115"/>
<Local:DataValue X="C" Y="120" Z="23" Open="156" Close="150" High="167" Low="145"/>
<Local:DataValue X="D" Y="135" Z="14" Open="135" Close="123" High="145" Low="120"/>
<Local:DataValue X="E" Y="100" Z="11" Open="110" Close="160" High="170" Low="110"/>
<Local:DataValue X="F" Y="80" Z="18" Open="165" Close="130" High="175" Low="120"/>
<Local:DataValue X="G" Y="135" Z="6" Open="120" Close="90" High="125" Low="90"/>
<Local:DataValue X="H" Y="150" Z="20" Open="85" Close="110" High="115" Low="80"/>
<Local:DataValue X="I" Y="120" Z="12" Open="110" Close="135" High="165" Low="95"/>
<Local:DataValue X="J" Y="130" Z="17" Open="135" Close="156" High="160" Low="120"/>
<Local:DataValue X="K" Y="145" Z="11" Open="150" Close="120" High="150" Low="100"/>
<Local:DataValue X="L" Y="110" Z="14" Open="120" Close="110" High="120" Low="100"/>
</Local:DataValueCollection>
</UserControl.Resources>
DataValue and DataValueCollection were defined as follows:
public class DataValue
{
public string X { get; set; }
public double Y { get; set; }
public double Z { get; set; }
public double Open { get; set; }
public double Close { get; set; }
public double High { get; set; }
public double Low { get; set; }
}
public class DataValueCollection : Collection { }