Wednesday, March 6, 2013 #

Charting in Windows 8 Store Apps

One of the queries I received from a partner was to have charting implemented in their Windows 8 Application.  While by default there are no chart controls, there are a lot of third party controls such as Telerik, Component One, providing charting for Windows 8.

However, there is also the WINRTXamlToolkit, available in CodePlex.  It provides a bunch of useful controls that are not available, by default, in XAML for use in Windows 8 Store Applications.

Also, specifically for Chart, you can install it from the Package Manager Console. 

Visual Studio 2012 –> View –> Other Windows –> Packager Manager Console

It opens up the Package Manager Console.  In the prompt, type

Install-Package WinRTXamlToolkit and then

Install-Package WinRTXamlToolkit.Controls.DataVisualization

Once you install this, you can start referencing the Chart Controls in your XAML Page.

The complete sample can be downloaded from the above codeplex link which also includes a sample project with all the controls.

But, for our simple demonstration purposes, I created a Blank Windows Store Application. 

Visual Studio 2012 – File – New Project – Visual C# – Windows Store – Blank App (XAML)

I then opened the Package Manager Console and ran the above PowerShell commands.

Just to verify the assemblies are ordered open “References” to see the WinRTXamlToolkit and WinRTXamlToolkit.Controls.DataVisualization

Open up MainPage.Xaml and add the following lines to the Page Declarations in top

xmlns:datavis="using:WinRTXamlToolkit.Controls.DataVisualization"    xmlns:charting="using:WinRTXamlToolkit.Controls.DataVisualization.Charting"

Then, within the Grid, add the following snippet

                Title="Pie Chart"
                        ItemsSource="{Binding Items}"
                        IndependentValueBinding="{Binding Name}"
                        DependentValueBinding="{Binding Value}"
                        IsSelectionEnabled="True" />

In the codebehind of MainPage.xaml, add the following

public class NameValueItem
           public string Name { get; set; }
           public int Value { get; set; }

We are simulating X,Y axis using a generic Text and Random Number.  Hence we need

private Random _random = new Random();

private void UpdateCharts()
           List<NameValueItem> items = new List<NameValueItem>();
           items.Add(new NameValueItem { Name = "Test1", Value = _random.Next(10, 100) });
           items.Add(new NameValueItem { Name = "Test2", Value = _random.Next(10, 100) });
           items.Add(new NameValueItem { Name = "Test3", Value = _random.Next(10, 100) });
           items.Add(new NameValueItem { Name = "Test4", Value = _random.Next(10, 100) });
           items.Add(new NameValueItem { Name = "Test5", Value = _random.Next(10, 100) });

((PieSeries)this.PieChart.Series[0]).ItemsSource = items;


Modify the Constructor to include the UpdateCharts method

public MainPage()

That’s it, you are set to run the Project and when you run it, you will see the output below


There are Bar Charts, Bar Series Charts, Line Charts, Scatter Charts and many other types.  

I have extract the above sample code from the large sample repository at

You can download this sample from



Posted On Wednesday, March 6, 2013 4:31 PM | Comments (9)