Click here to Skip to main content
12,747,366 members (37,763 online)
Click here to Skip to main content
Add your own
alternative version


18 bookmarked
Posted 2 May 2009

A Stacked Bar Chart Silverlight control

, 3 May 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
A stacked Bar Chart control for Silverlight.

The Silverlight Toolkit provides developers and designers with a whole host of different controls that don't come as standard. Among other things, it contains charting controls for creating bar charts, pie charts, and line graphs etc. I recently had a requirement for a stacked bar chart, which unfortunately is one of the few types of charts that isn't supported out of the box. However, after reading a series of posts written by Jafar Husain and taking a look at the toolkit source code, I realised that I could create a stacked bar chart relatively easily myself - despite having only limited knowledge of Silverlight. At this point, I have to apologise to Jafar - I asked his advice via his blog, and he responded with a very comprehensive description of how he would go about tackling this problem. Jafar's approach would have produced a much more complete and flexible solution; however, it was overkill for what I needed, and I had to get something put together as quickly as possible, so I took an (arguably) more hacky approach.

The approach I took was to create a new StackedColumnSeries which is a total copy of the System.Windows.Controls.DataVisualization.Charting.ColumnSeries class. At this point, it would have been great to have been able to use ColumnSeries as the base class for StackedColumnSeries, but because ColumnSeries is sealed, I had to copy and paste instead. I had to copy and paste various other chunks of code from the toolkit as well, to get my copy of ColumnSeries to compile since various helper classes etc were internal. If you download the code you will see that I've clearly commented which bits of code I've copied, so if the toolkit team open up their code a bit more in the future it will be straight forward to change the StackedColumnSeries class.

Once the StackedColumnSeries class was compiling and functioning like the ColumnSeries, I needed to make changes to just two methods to make it function like a stacked column chart. The methods that I changed were UpdateDataPoint(DataPoint dataPoint) so that columns could be rendered so that they appear stacked on top of each other, and GetValueMargins(IValueMarginConsumer consumer) so that I could increase the range of values that appear on the axis, taking into account the fact that the maximum value that needed to be displayed now needed to be the sum of the stacked columns.

The two changed methods are shown below - please see the comments in the code for the changes that I needed to make to the code that I copied from the ColumnSeries.

/// <span class="code-SummaryComment"><summary>

The result of running this code and binding some data to the chart can be shown below (notice, I have also added a line series):

Staked Bar Chart


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United Kingdom United Kingdom
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralExcellent article thanks for sharing, however...... Pin
Alan Gregory22-Feb-10 22:10
memberAlan Gregory22-Feb-10 22:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170215.1 | Last Updated 3 May 2009
Article Copyright 2009 by S1mm0t
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid