Silverlight chart with a Goal line

Some time ago I needed a chart with a horizontal line describing some desirable value and visually demonstrating a relation between a planned value and actual values. Here is the result:

I tried to handle all possible situations and charts.
A case when the goal value (90) is much higher then the highest value:

A case when the goal value (-20) is lower then 0:

A case when there are both positive and negative values:

The code of the extended chart is rather difficult to explain, so use it as it is.
But I can explain usage of this chart. Here is the code example:

    <Style x:Key="ChartGoalLineStyle" TargetType="Polyline" >
        <Setter Property="StrokeThickness" Value="1" />
        <Setter Property="Stroke" Value="#FF27AAE1" />
<local:ExtendedChart GoalValue="35" GoalLineOrientation="X" GoalLineStyle="{StaticResource ChartGoalLineStyle}">
    <chart:LineSeries ItemsSource="{Binding Items}" DependentValuePath="Value" IndependentValuePath="Month" />

So there are 3 mandatory properties:
1. GoalValue – the value of the goal in relation to data values. If the data is measured in millions – goal value should be in millions too, if the data is in percents – the goal value should be between 0 and 100. But it is not required, as you have already seen, the goal value can be as well very high or lower then 0.
2. GoalLineOrientation – This value should be “X” for Line,Column,Area charts and “Y” for Bar charts. Must be parallel to an independent non-value axis. I tried to detect preferable orientation automatically, but it is not so easy and can lead to many bugs.
3. GoalLineStyle – Any style which can be applied to the Polyline class. In my example I’ve set only the color and thickness, but it is also possible to make the line dashed, for example.

Optional properties (not required):
1. GoalRectangleStyle – The background between the line and zero-point. you can change its color, borders and so on.
2. IsLegendDisplayed – Some charts look better without the legend, so I added this important option.

Here is source code of the solution:
Showcase: SilverlightChartWithGoalLineTestPage.html

About these ads

4 Responses to Silverlight chart with a Goal line

  1. RBurke says:

    Thanks for making this available. I was about to attempt something similar when I came across your ExtendedChart. Plugged it in and it worked. What a luxury!

  2. Awesome enhancement, saved me lots of time. You should consider getting this into John Rayner’s .NET 4 optimised WPF Toolkit: Also, I updated it to accept a collection of values instead of just one so you can do goal boundaries, etc. DM me if you’re interested. And finally: works in WPF too!

    • vortexwolf says:

      Though I considered to move all these scattered source code projects to a github, it will require lot of time. As for the WPF Toolkit project, the first thing that it is necessary to do is to add features that Silverlight toolkit has like StackedColumn, StackedBar charts, but again nobody wanted to do this.

      You can send me your enhanced project to email ( or post a link to dropbox/skydrive here. I will create a sample application and add it to the post.

      • Yeah appreciate it’s time consuming. I wasn’t even aware of the Stacked… feature set in Silverlight or even that the two toolkits were materially different! I’ll add it to the (low priority!) list of to-dos!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

%d bloggers like this: