Click here to Skip to main content
11,925,292 members (60,165 online)
Click here to Skip to main content
Add your own
alternative version


87 bookmarked

Styling a Silverlight Chart

, 27 Jan 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
A article on how to style a standard Silverlight chart to look like the Google Analytics chart.



I love Google Analytics! I use it to monitor every site I own… Google’s chart looks very slick! Here is a walkthrough on how to style your Silverlight chart to look like the Google Analytics chart!

Before we start

We need some data. I created very basic TrafficInfo and TrafficInfoCollection objects with some dummy data that I can bind to.

public class TrafficInfo
    public DateTime Date { get; set; }
    public int Visits { get; set; }

We also need the Silverlight Toolkit (I used the port to WPF created by Jaime Rodriquez).

Let's start with the basics

Add the following two namespaces:


Now, let's create a simple line chart:

<charting:Chart Width="800" Height="175">
        <charting:LineSeries IsSelectionEnabled="True"
                    ItemsSource="{StaticResource TrafficInfo}"
                    IndependentValueBinding="{Binding Date}"
                    DependentValueBinding="{Binding Visits}" />

And here is our master piece:


Not bad, but…

Style, style, style

Let's start styling our chart… I will split the styling into two parts; the first part will be specific to line charts, and the second part might be relevant to other types of charts too…

Styling the LineSeries

Each LineSeries has a PolylineStyle property. The PolylineStyle controls how the line looks. Here is our GooglePolylineStyle:

<Style x:Key="GooglePolylineStyle" TargetType="Polyline">
    <Setter Property="StrokeThickness" Value="5"/>

And, here is the style for the LineDataPoint:

<Style x:Key="GoogleLineDataPointStyle" TargetType="charting:LineDataPoint">
    <Setter Property="Background" Value="#0077CC" />
    <Setter Property="BorderBrush" Value="White"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Template">
            <ControlTemplate TargetType="charting:LineDataPoint">
                <Grid x:Name="Root" Opacity="1">
                        <StackPanel Margin="2,2,2,2">
                            <ContentControl Content="{TemplateBinding IndependentValue}" 
                                            ContentStringFormat="{}{0:MMMM d, yyyy}"/>
                            <ContentControl Content="{TemplateBinding DependentValue}" 
                                            ContentStringFormat="Visits {0:###,###,###}"/>
                    <Ellipse StrokeThickness="{TemplateBinding BorderThickness}" 
                     Stroke="{TemplateBinding BorderBrush}" 
                     Fill="{TemplateBinding Background}"/>

Also update the chart’s LineSeries to use our newly created styles:

<charting:LineSeries IsSelectionEnabled="True"
            PolylineStyle="{StaticResource GooglePolylineStyle}" 
            DataPointStyle="{StaticResource GoogleLineDataPointStyle}"
            MarkerHeight="10" MarkerWidth="10"
            ItemsSource="{StaticResource TrafficInfo}"                                    
            IndependentValueBinding="{Binding Date}"
            DependentValueBinding="{Binding Visits}" />

And, here is the result:


There are a few things to notice here. Each DataPoint has the following properties you can use and display in your tooltip:

  • DependentValue
  • FormattedDependentValue
  • IndependentValue
  • FormattedIndependentValue

Each LineSeries can specify the DataPoint marker size using MarkerWidth and MarkerHeight.

Styling the chart

I want to remove the title and the ledger of the chart. There are two options to removing these items! You can create new styles for the title and the ledger that sets its visibility to Collapsed. (This trick also works if you don’t want DataPoint markers.)

<Style x:Key="GoogleNoTitle" TargetType="datavis:Title">
    <Setter Property="Visibility" Value="Collapsed"/>

Then, just set the TitleStyle and LedgerStyle properties on the chart:

TitleStyle="{StaticResource GoogleNoTitle}"

The seconds method of removing these is to rather create a new ControlTemplate for the chart and remove them permanently!

<Style x:Key="GoogleChart" TargetType="charting:Chart">
    <Setter Property="PlotAreaStyle">
            <Style TargetType="Grid">
                <Setter Property="Background" Value="White" />
    <Setter Property="Template">
            <ControlTemplate TargetType="charting:Chart">
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        <Grid Grid.Row="1" Margin="0,15,0,15">
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            <Grid x:Name="ChartArea" 
                                 Style="{TemplateBinding ChartAreaStyle}">
                                <Grid x:Name="PlotArea" 
                                      Style="{TemplateBinding PlotAreaStyle}" 
                                      Margin="0,0,0,0" >
                                    <Grid x:Name="GridLinesContainer" />
                                    <Grid x:Name="SeriesContainer" />
                                    <Border Margin="0,0,0,0" 

The new ControlTemplate merely removes the title and ledger! The last part of the chart we need to style are the axes. If you look at the Google chart, you will notice that the vertical grid lines indicate where a week starts; how difficult would this be?

Each chart has an Axes property, which can contain multiple axis! Here are some of the axis properties I used:

LabelStringFormat MMMM d, yyyy Changes the format of the labels
ShowGridLines True Shows the grid lines
ShowTickMarks True Shows the grid line markers
ShouldIncludeZero True Scales from 0
IntervalType Days Indicates what each unit on the axis is
Interval 7 Interval between points on the axis
IntervalOffset 1 Offset used in creating the axis
IntervalOffsetType Days Offset type

Here is the markup:

    <charting:Axis Orientation="Horizontal" 
                   AxisType="DateTime" ShowGridLines="True" 
                   ShowTickMarks="True" LabelStringFormat="MMMM d, yyyy" 
                   IntervalType="Days" Interval="7" 
                   IntervalOffset="1" IntervalOffsetType="Days" 
                   Style="{StaticResource GoogleAxisStyle}" />
    <charting:Axis Orientation="Vertical" AxisType="Linear" ShowTickMarks="False" 
                   Interval="4000" IntervalType="Number" 
                   ShowGridLines="True" ShouldIncludeZero="True" 
                   Style="{StaticResource GoogleAxisStyle}"/>

And that is it.


The Silverlight Toolkit Chart control is very flexible and powerful! Try it out, and you will be surprised at the endless ways you can style it!

If you found this article useful or interesting, please vote for it!


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


About the Author

South Africa South Africa
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 4 Pin
Ali Bagherzadeh23-Dec-14 3:54
memberAli Bagherzadeh23-Dec-14 3:54 
GeneralMy vote of 1 Pin
Member 1076790620-May-14 5:40
memberMember 1076790620-May-14 5:40 
GeneralMy vote of 5 Pin
Fabián García28-Nov-12 9:08
memberFabián García28-Nov-12 9:08 
General2010 Charting changed Pin
tomerhs9-Oct-10 22:54
membertomerhs9-Oct-10 22:54 
SuggestionRe: 2010 Charting changed Pin
Member 1076790620-May-14 5:42
memberMember 1076790620-May-14 5:42 
GeneralDLL doesnot exist!! Pin
souidi abderrahmen31-Aug-10 0:01
membersouidi abderrahmen31-Aug-10 0:01 
GeneralRe: DLL doesnot exist!! Pin
Indivara4-Feb-11 15:10
subeditorIndivara4-Feb-11 15:10 
GeneralMy vote of 5 Pin
Hariom Dubey7-Jul-10 20:23
memberHariom Dubey7-Jul-10 20:23 
GeneralMy vote of 1 Pin
OBRon16-Dec-09 9:51
memberOBRon16-Dec-09 9:51 
GeneralMore ToolTip Properties Pin
Member 7107482-Oct-09 18:05
memberMember 7107482-Oct-09 18:05 
GeneralAxis.IntervalType property does not exist Pin
Takuan.Daikon24-Aug-09 19:12
memberTakuan.Daikon24-Aug-09 19:12 
GeneralRe: Axis.IntervalType property does not exist Pin
Takuan.Daikon24-Aug-09 19:18
memberTakuan.Daikon24-Aug-09 19:18 
GeneralLine colors dynamically Pin
zappingz28-Feb-09 2:54
memberzappingz28-Feb-09 2:54 
GeneralRe: Line colors dynamically Pin
rudigrobler1-Mar-09 20:03
memberrudigrobler1-Mar-09 20:03 
GeneralRe: Line colors dynamically Pin
Ramsdal4223-Sep-10 3:47
memberRamsdal4223-Sep-10 3:47 
GeneralRe: Line colors dynamically [modified] Pin
maxuepeng21-Dec-10 16:08
membermaxuepeng21-Dec-10 16:08 
GeneralRe: Line colors dynamically Pin
Member 404292826-Apr-11 9:44
memberMember 404292826-Apr-11 9:44 
GeneralMy vote of 2 Pin
Richard Deeming10-Feb-09 9:07
memberRichard Deeming10-Feb-09 9:07 
GeneralRe: My vote of 2 Pin
rudigrobler10-Feb-09 23:34
memberrudigrobler10-Feb-09 23:34 
GeneralRe: My vote of 2 Pin
Hüseyin Tüfekçilerli17-Feb-09 2:55
memberHüseyin Tüfekçilerli17-Feb-09 2:55 
GeneralRe: My vote of 2 Pin
DZaK831-Mar-09 13:19
memberDZaK831-Mar-09 13:19 
GeneralRe: My vote of 2 Pin
rudigrobler1-Mar-09 20:04
memberrudigrobler1-Mar-09 20:04 
GeneralI can't compile the Pin
binarycheese10-Feb-09 5:34
memberbinarycheese10-Feb-09 5:34 
GeneralRe: I can't compile the Pin
rudigrobler10-Feb-09 23:37
memberrudigrobler10-Feb-09 23:37 
GeneralRe: I can't compile the Pin
binarycheese17-Feb-09 12:00
memberbinarycheese17-Feb-09 12:00 
GeneralRe: I can't compile the Pin
ssawchenko7-Dec-09 8:17
memberssawchenko7-Dec-09 8:17 
GeneralRe: I can't compile the Pin
pcummings30-Jul-10 3:12
memberpcummings30-Jul-10 3:12 
GeneralSilverlight implementation Pin
gizi4-Feb-09 1:54
membergizi4-Feb-09 1:54 
GeneralRe: Silverlight implementation Pin
gizi4-Feb-09 1:58
membergizi4-Feb-09 1:58 
GeneralRe: Silverlight implementation Pin
arikooe6-Feb-09 10:25
memberarikooe6-Feb-09 10:25 
GeneralRe: Silverlight implementation Pin
gizi6-Feb-09 12:12
membergizi6-Feb-09 12:12 
GeneralRe: Silverlight implementation Pin
arikooe7-Feb-09 2:17
memberarikooe7-Feb-09 2:17 
GeneralRe: Silverlight implementation Pin
gizi8-Feb-09 21:04
membergizi8-Feb-09 21:04 
GeneralRe: Silverlight implementation Pin
rudigrobler8-Feb-09 22:42
memberrudigrobler8-Feb-09 22:42 
GeneralRe: Silverlight implementation Pin
arikooe10-Feb-09 21:19
memberarikooe10-Feb-09 21:19 
GeneralRe: Silverlight implementation Pin
gizi11-Feb-09 8:02
membergizi11-Feb-09 8:02 
GeneralExcellent Sample Pin
Pete O'Hanlon28-Jan-09 1:51
mvpPete O'Hanlon28-Jan-09 1:51 
GeneralRe: Excellent Sample Pin
rudigrobler28-Jan-09 2:00
memberrudigrobler28-Jan-09 2:00 
GeneralWow 5/5 Pin
prasad0227-Jan-09 19:50
memberprasad0227-Jan-09 19:50 
GeneralRe: Wow 5/5 Pin
rudigrobler27-Jan-09 20:06
memberrudigrobler27-Jan-09 20:06 
GeneralAnother good article Rudi Pin
ColinM12327-Jan-09 13:14
memberColinM12327-Jan-09 13:14 
GeneralRe: Another good article Rudi Pin
rudigrobler27-Jan-09 20:05
memberrudigrobler27-Jan-09 20:05 
GeneralGood work Pin
Mika Wendelius27-Jan-09 11:38
mvpMika Wendelius27-Jan-09 11:38 
GeneralRe: Good work Pin
rudigrobler27-Jan-09 20:04
memberrudigrobler27-Jan-09 20:04 
GeneralIts nice Rudi Pin
Sacha Barber27-Jan-09 7:26
mvpSacha Barber27-Jan-09 7:26 
GeneralRe: Its nice Rudi Pin
rudigrobler27-Jan-09 20:03
memberrudigrobler27-Jan-09 20:03 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.151126.1 | Last Updated 27 Jan 2009
Article Copyright 2009 by rudigrobler
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid