Stacked Column Chart | Visiblox Gallery
This demonstrates how to produce a stacked column chart.
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.StackedColumnChart.StackedColumnChartExample"
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"
xmlns:local="clr-namespace:Visiblox.Charts.Examples.StackedColumnChart"
xmlns:charts="clr-namespace:Visiblox.Charts;assembly=Visiblox.Charts"
mc:Ignorable="d">
<UserControl.Resources>
<Style x:Key="NoBorder" TargetType="Border">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderBrush" Value="Black" />
</Style>
<local:PartyList x:Key="Labour">
<local:ElectionResult Year="1997" VotesMillions="13.5" />
<local:ElectionResult Year="2001" VotesMillions="10.7" />
<local:ElectionResult Year="2005" VotesMillions="9.6" />
<local:ElectionResult Year="2010" VotesMillions="8.6"/>
</local:PartyList>
<local:PartyList x:Key="Conservatives">
<local:ElectionResult Year="1997" VotesMillions="9.6" />
<local:ElectionResult Year="2001" VotesMillions="8.4" />
<local:ElectionResult Year="2005" VotesMillions="8.8" />
<local:ElectionResult Year="2010" VotesMillions="10.7"/>
</local:PartyList>
<local:PartyList x:Key="LibDem">
<local:ElectionResult Year="1997" VotesMillions="5.2" />
<local:ElectionResult Year="2001" VotesMillions="4.8" />
<local:ElectionResult Year="2005" VotesMillions="6.0" />
<local:ElectionResult Year="2010" VotesMillions="6.8"/>
</local:PartyList>
<local:PartyList x:Key="Others">
<local:ElectionResult Year="1997" VotesMillions="2.9" />
<local:ElectionResult Year="2001" VotesMillions="2.5" />
<local:ElectionResult Year="2005" VotesMillions="2.8" />
<local:ElectionResult Year="2010" VotesMillions="3.5"/>
</local:PartyList>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<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="General Election Results from 1997 to 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"
Title="Votes (millions)"/>
</charts:Chart.YAxis>
<!-- Define the X-Axis -->
<charts:Chart.XAxis>
<charts:CategoryAxis ShowGridStripes="False"
ShowMajorGridlines="False"
ShowMinorTicks="False"
Title="General Election"/>
</charts:Chart.XAxis>
<charts:Chart.Series>
<charts:StackedColumnSeries>
<charts:ColumnSeries>
<!-- Defining the data source using data binding -->
<charts:ColumnSeries.DataSeries>
<charts:BindableDataSeries Title="Labour"
ItemsSource="{StaticResource Labour}"
XValueBinding="{Binding Path=Year}"
YValueBinding="{Binding Path=VotesMillions}"/>
</charts:ColumnSeries.DataSeries>
</charts:ColumnSeries>
<charts:ColumnSeries>
<!-- Defining the data source using data binding -->
<charts:ColumnSeries.DataSeries>
<charts:BindableDataSeries Title="Conservatives"
ItemsSource="{StaticResource Conservatives}"
XValueBinding="{Binding Path=Year}"
YValueBinding="{Binding Path=VotesMillions}"/>
</charts:ColumnSeries.DataSeries>
</charts:ColumnSeries>
<charts:ColumnSeries>
<!-- Defining the data source using data binding -->
<charts:ColumnSeries.DataSeries>
<charts:BindableDataSeries Title="Liberal Democrats"
ItemsSource="{StaticResource LibDem}"
XValueBinding="{Binding Path=Year}"
YValueBinding="{Binding Path=VotesMillions}"/>
</charts:ColumnSeries.DataSeries>
</charts:ColumnSeries>
<charts:ColumnSeries>
<!-- Defining the data source using data binding -->
<charts:ColumnSeries.DataSeries>
<charts:BindableDataSeries Title="Others"
ItemsSource="{StaticResource Others}"
XValueBinding="{Binding Path=Year}"
YValueBinding="{Binding Path=VotesMillions}"/>
</charts:ColumnSeries.DataSeries>
</charts:ColumnSeries>
</charts:StackedColumnSeries>
</charts:Chart.Series>
</charts:Chart>
<StackPanel Grid.Row="1" Orientation="Horizontal" Margin="0, 10, 0, 0" HorizontalAlignment="Center">
<TextBlock Text="Stacking Style: " Margin="0, 0, 5, 0" FontWeight="Bold"/>
<RadioButton x:Name="Stacked" Content="Stacked" Margin="0, 0, 5, 0" Checked="Stacked_Checked" IsChecked="True" />
<RadioButton x:Name="OneHundredStacked" Content="100% Stacked" Checked="OneHundredStacked_Checked" />
</StackPanel>
</Grid>
</UserControl>
^ Back To Top
Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
namespace Visiblox.Charts.Examples.StackedColumnChart
{
/// <summary>
/// An example displaying stacked column charts
/// </summary>
public partial class StackedColumnChartExample : UserControl
{
public StackedColumnChartExample()
{
InitializeComponent();
}
private void Stacked_Checked(object sender, RoutedEventArgs e)
{
if (MainChart == null)
return;
var series = MainChart.Series.First() as StackedColumnSeries;
series.StackingMode = StackingMode.Normal;
MainChart.YAxis.Title = "Votes (millions)";
}
private void OneHundredStacked_Checked(object sender, RoutedEventArgs e)
{
if (MainChart == null)
return;
var series = MainChart.Series.First() as StackedColumnSeries;
series.StackingMode = StackingMode.HundredPercent;
MainChart.YAxis.Title = "Vote Share (%)";
}
}
// Data Model
public class PartyList : List<ElectionResult> { }
public class ElectionResult
{
public String Year { get; set; }
public double VotesMillions { 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
