Stacked Area Chart | Visiblox Gallery
This demonstrates how to produce a stacked area chart.
Selection of a series can be achieved by clicking an individual area.
Zooming has been enabled - click and drag with the mouse on the plot area or use the mouse wheel to zoom, double click to unzoom.
XAML + CODE +XAML
<UserControl x:Class="Visiblox.Charts.Examples.StackedAreaChart.StackedAreaChartExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:charts="clr-namespace:Visiblox.Charts;assembly=Visiblox.Charts"
xmlns:local="clr-namespace:Visiblox.Charts.Examples.StackedAreaChart">
<UserControl.Resources>
<Style x:Key="NoBorder" TargetType="Border">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderBrush" Value="Black" />
</Style>
<local:SalesList x:Key="Desktops">
<local:Sale Quarter="2009 Q1" Sales="7" />
<local:Sale Quarter="2009 Q2" Sales="4" />
<local:Sale Quarter="2009 Q3" Sales="2" />
<local:Sale Quarter="2009 Q4" Sales="11" />
<local:Sale Quarter="2010 Q1" Sales="8" />
<local:Sale Quarter="2010 Q2" Sales="3" />
<local:Sale Quarter="2010 Q3" Sales="4" />
<local:Sale Quarter="2010 Q4" Sales="12" />
</local:SalesList>
<local:SalesList x:Key="Laptops">
<local:Sale Quarter="2009 Q1" Sales="20" />
<local:Sale Quarter="2009 Q2" Sales="13" />
<local:Sale Quarter="2009 Q3" Sales="12" />
<local:Sale Quarter="2009 Q4" Sales="25" />
<local:Sale Quarter="2010 Q1" Sales="22" />
<local:Sale Quarter="2010 Q2" Sales="14" />
<local:Sale Quarter="2010 Q3" Sales="14" />
<local:Sale Quarter="2010 Q4" Sales="26" />
</local:SalesList>
<local:SalesList x:Key="Netbooks">
<local:Sale Quarter="2009 Q1" Sales="13" />
<local:Sale Quarter="2009 Q2" Sales="10" />
<local:Sale Quarter="2009 Q3" Sales="12" />
<local:Sale Quarter="2009 Q4" Sales="15" />
<local:Sale Quarter="2010 Q1" Sales="14" />
<local:Sale Quarter="2010 Q2" Sales="12" />
<local:Sale Quarter="2010 Q3" Sales="13" />
<local:Sale Quarter="2010 Q4" Sales="16" />
</local:SalesList>
<local:SalesList x:Key="Tablets">
<local:Sale Quarter="2009 Q1" Sales="3" />
<local:Sale Quarter="2009 Q2" Sales="4" />
<local:Sale Quarter="2009 Q3" Sales="2" />
<local:Sale Quarter="2009 Q4" Sales="5" />
<local:Sale Quarter="2010 Q1" Sales="4" />
<local:Sale Quarter="2010 Q2" Sales="2" />
<local:Sale Quarter="2010 Q3" Sales="1" />
<local:Sale Quarter="2010 Q4" Sales="1" />
</local:SalesList>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White" Width="600" Height="350">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Ultimate Trial users should add 'ValidationKey="ENTER TRIAL LICENSE KEY HERE"' to each Chart declaration. -->
<charts:Chart Width="600" Height="350" x:Name="MainChart" Title="Sales in 2010" HorizontalAlignment="Center"
PlotAreaBorderStyle="{StaticResource NoBorder}" LegendPosition="OutsideTopRight">
<!-- Add zoom to the chart -->
<charts:Chart.Behaviour>
<charts:ZoomBehaviour/>
</charts:Chart.Behaviour>
<charts:Chart.YAxis>
<charts:LinearAxis ShowMinorTicks="False"
ShowMajorGridlines="False"
IsAutoMarginEnabled="False"
Title="Sales (millions)"
IsLabelOverflowAllowed="False"/>
</charts:Chart.YAxis>
<!-- Define the X-Axis -->
<!-- Note that if no label were to set for the axis this declaration wouldn't be needed, the axis is auto created -->
<charts:Chart.XAxis>
<charts:CategoryAxis ShowGridStripes="False"
ShowMajorGridlines="False"
ShowMinorTicks="False"
IsAutoMarginEnabled="False"/>
</charts:Chart.XAxis>
<charts:Chart.Series>
<charts:StackedLineSeries>
<charts:LineSeries SelectionMode="Series"
ShowLine="True"
ShowArea="True">
<!-- Defining the data source using data binding -->
<charts:LineSeries.DataSeries>
<charts:BindableDataSeries Title="Desktops"
ItemsSource="{StaticResource Desktops}"
XValueBinding="{Binding Path=Quarter}"
YValueBinding="{Binding Path=Sales}"/>
</charts:LineSeries.DataSeries>
</charts:LineSeries>
<charts:LineSeries SelectionMode="Series"
ShowLine="True"
ShowArea="True">
<!-- Defining the data source using data binding -->
<charts:LineSeries.DataSeries>
<charts:BindableDataSeries Title="Laptops"
ItemsSource="{StaticResource Laptops}"
XValueBinding="{Binding Path=Quarter}"
YValueBinding="{Binding Path=Sales}"/>
</charts:LineSeries.DataSeries>
</charts:LineSeries>
<charts:LineSeries SelectionMode="Series"
ShowLine="True"
ShowArea="True">
<!-- Defining the data source using data binding -->
<charts:LineSeries.DataSeries>
<charts:BindableDataSeries Title="Netbooks"
ItemsSource="{StaticResource Netbooks}"
XValueBinding="{Binding Path=Quarter}"
YValueBinding="{Binding Path=Sales}"/>
</charts:LineSeries.DataSeries>
</charts:LineSeries>
<charts:LineSeries SelectionMode="Series"
ShowLine="True"
ShowArea="True">
<!-- Defining the data source using data binding -->
<charts:LineSeries.DataSeries>
<charts:BindableDataSeries Title="Tablets"
ItemsSource="{StaticResource Tablets}"
XValueBinding="{Binding Path=Quarter}"
YValueBinding="{Binding Path=Sales}"/>
</charts:LineSeries.DataSeries>
</charts:LineSeries>
</charts:StackedLineSeries>
</charts:Chart.Series>
</charts:Chart>
<StackPanel Grid.Row="1" Margin="0, 10, 0, 0">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Line Style: " Margin="0, 0, 5, 0" FontWeight="Bold"/>
<RadioButton x:Name="Straight" GroupName="LineType" Content="Straight" Margin="0, 0, 5, 0" Checked="Line_Checked" IsChecked="True" />
<RadioButton x:Name="Curved" GroupName="LineType" Content="Curved" Checked="Spline_Checked" />
<TextBlock Text="Stacking Style: " Margin="15, 0, 5, 0" FontWeight="Bold"/>
<RadioButton x:Name="Stacked" GroupName="StackType" Content="Stacked" Margin="0, 0, 5, 0" Checked="Stacked_Checked" IsChecked="True" />
<RadioButton x:Name="OneHundredStacked" GroupName="StackType" Content="100% Stacked" Checked="OneHundredStacked_Checked" />
</StackPanel>
</StackPanel>
</Grid>
</UserControl>
^ Back To Top
Code
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
namespace Visiblox.Charts.Examples.StackedAreaChart
{
/// <summary>
/// An example to demonstrate the ability of Visiblox to stack
/// areas on top of each other
/// </summary>
public partial class StackedAreaChartExample : UserControl
{
public StackedAreaChartExample()
{
InitializeComponent();
MainChart.YAxis.Range = new DoubleRange(0, 60);
}
private void Stacked_Checked(object sender, RoutedEventArgs e)
{
if (MainChart == null)
return;
var series = MainChart.Series.First() as StackedLineSeries;
series.StackingMode = StackingMode.Normal;
MainChart.YAxis.Range = new DoubleRange(0, 60);
MainChart.YAxis.Title = "Sales (millions)";
}
private void OneHundredStacked_Checked(object sender, RoutedEventArgs e)
{
if (MainChart == null)
return;
var series = MainChart.Series.First() as StackedLineSeries;
series.StackingMode = StackingMode.HundredPercent;
MainChart.YAxis.Range = new DoubleRange(0, 100);
MainChart.YAxis.Title = "Sales (%)";
}
private void Line_Checked(object sender, RoutedEventArgs e)
{
if (MainChart == null || MainChart.Series.Count < 1)
return;
var dataSeries = GetDataSeries();
var stackedSeries = MainChart.Series.First() as StackedLineSeries;
stackedSeries.Series.Clear(); // Clear existing
foreach (BindableDataSeries series in dataSeries)
{
stackedSeries.Series.Add(new LineSeries()
{
DataSeries = series,
SelectionMode = SelectionMode.Series,
ShowLine = true,
ShowArea = true
});
}
}
private void Spline_Checked(object sender, RoutedEventArgs e)
{
var dataSeries = GetDataSeries();
var stackedSeries = MainChart.Series[0] as Visiblox.Charts.StackedLineSeries;
stackedSeries.Series.Clear(); // Clear existing
foreach (BindableDataSeries series in dataSeries)
{
stackedSeries.Series.Add(new SplineSeries()
{
DataSeries = series,
SelectionMode = SelectionMode.Series,
ShowLine = true,
ShowArea = true
});
}
}
private List<BindableDataSeries> GetDataSeries()
{
var dataSeries = new List<BindableDataSeries>();
var stackedSeries = MainChart.Series.First() as StackedLineSeries;
foreach (IChartSingleSeries singleSeries in stackedSeries.Series)
{
dataSeries.Add(singleSeries.DataSeries as BindableDataSeries);
}
return dataSeries;
}
}
// Data Model
public class SalesList : List<Sale> { }
public class Sale
{
public string Quarter { get; set; }
public int Sales { get; set; }
}
}
^ Back To Top
Real Charting Power...
View Features and Try for Free
Chart Types
See example charts and download sample source code
Line And Area Charts
Bar And Column Charts
Financial Charts
Other Charts
Developer Features
Check out chart features and technical documentation
High Performance
Customised Look And Feel
Application Development
Other Features
