Bar charts in Silverlight Elements

Mindscape Silverlight bar chart

What is it?

Bar charts are one of the most commonly used types of charts and can be used in many different scenarios. Bar charts are great for mapping arbitrary objects to data values. For example, you could map month names to profit values, or plot the quantity of different products being sold. As you will know, bar charts display data as rectangles arranged along the independent axis. By adding multiple bar series to a chart such as the one seen above, the bars will be neatly displayed side by side.

What features does it have?

By default, the data points are plotted as vertical bars along the X axis. Simply by changing the BarSeries.Orientation property you can display your bar charts horizontally:

Horizontal Bar Chart

The thickness of the bars can be customised by changing the BarSeries.BarSizeFactor property. The width of each bar is determined by multiplying the size of a single axis unit by this factor. By default, this value is 0.8 which allows for a gap to appear between the bars. By changing this value to 1, you get a chart like this where all the bars are touching:


The bar chart is one of the most interesting charts to create custom styles for. There are so many different possibilities and a lot of very nice effects can be achieved that add a rich flavour to your applications. You can create pseudo 3D styles, color the bars depending on the data they display or try various shading and gradient effects. For example, here’s a rounded bar style that uses simple lighting effects to get a shiny look:

Custom Bar Style

The ChartingGallery sample included with Silverlight Elements shows you how to create styles like this and others.

How do I build it?

All you need to do to create bar charts is add one or more BarSeries to a Mindscape Silverlight Elements Chart control. The XAML code seen below is what I have used to create the chart seen at the top of this blog post. Here you can see there is a Chart control that has been given three BarSeries to plot. I have also included some grid lines and stripe lines to make it look more sophisticated.

<ms:Chart Title="Multiple bar series">
    <ms:BarSeries SeriesBrush="#FFA500" />
    <ms:BarSeries SeriesBrush="#FF0C00" />
    <ms:BarSeries SeriesBrush="#640707" />
        <ms:ChartGrid VerticalGridLineBrush="Transparent"
                <SolidColorBrush Color="#EFEFEF" />
                <SolidColorBrush Color="Transparent" />
        <ms:ChartAxis Minimum="1" Maximum="6"
                      Title="X Axis" LabelLayout="Inside" />
        <ms:ChartAxis Minimum="0" Maximum="100"
                      Title="Y Axis" />

This is the code I have used to fill the 3 bar series with random sample data:

IList points1 = new List<object>();
IList points2 = new List<object>();
IList points3 = new List<object>();
Random r = new Random();
for (int i = 0; i < 10; i++)
    double y1 = r.NextDouble() * 100;
    double y2 = r.NextDouble() * 100;
    double y3 = r.NextDouble() * 100;
    points1.Add(new Point(i, y1));
    points2.Add(new Point(i, y2));
    points3.Add(new Point(i, y3));
Chart3.Series[0].ItemsSource = points1;
Chart3.Series[1].ItemsSource = points2;
Chart3.Series[2].ItemsSource = points3;

In a production application of course you’d typically use data binding with the BarSeries.XBinding and BarSeries.YBinding properties — this way you can plot information directly from nice testable business objects without having to write view code like this.

where can I get this?

The bar chart and many others are available right now in the Silverlight Elements 2.0 nightly build, and you can download them today. You can also have a play with the bar charts and all our other Silverlight controls by checking out the online demo. If there are any features or chart types that you would like to see in Silverlight Elements then let us know by leaving a comment on this blog post or putting a request on the forum.

Leave a Reply


Join our mailer

You should join our newsletter! Sent monthly:

Back to Top