Stacked Bar Chart | Visiblox Gallery
This demonstrates how to produce a stacked bar chart.
Tooltips have been enabled to show data when hovering over a row, and selection of a series can be achieved by clicking an individual row.
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.StackedBarChart.StackedBarChartExample"
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.StackedBarChart"
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:HousingStockNumberList x:Key="FlatOrApartment">
<local:HousingStockNumber Period="1980-1999" ThousandsOfDwellings="409.4"/>
<local:HousingStockNumber Period="1960-1979" ThousandsOfDwellings="1261.7"/>
<local:HousingStockNumber Period="1940-1959" ThousandsOfDwellings="919.5"/>
<local:HousingStockNumber Period="1920-1939" ThousandsOfDwellings="322.1"/>
<local:HousingStockNumber Period="1900-1919" ThousandsOfDwellings="436.2"/>
</local:HousingStockNumberList>
<local:HousingStockNumberList x:Key="Bungalow">
<local:HousingStockNumber Period="1980-1999" ThousandsOfDwellings="208.1"/>
<local:HousingStockNumber Period="1960-1979" ThousandsOfDwellings="651"/>
<local:HousingStockNumber Period="1940-1959" ThousandsOfDwellings="604"/>
<local:HousingStockNumber Period="1920-1939" ThousandsOfDwellings="214.8"/>
<local:HousingStockNumber Period="1900-1919" ThousandsOfDwellings="26.8"/>
</local:HousingStockNumberList>
<local:HousingStockNumberList x:Key="Detached">
<local:HousingStockNumber Period="1980-1999" ThousandsOfDwellings="570.5"/>
<local:HousingStockNumber Period="1960-1979" ThousandsOfDwellings="644.3"/>
<local:HousingStockNumber Period="1940-1959" ThousandsOfDwellings="375.8"/>
<local:HousingStockNumber Period="1920-1939" ThousandsOfDwellings="456.4"/>
<local:HousingStockNumber Period="1900-1919" ThousandsOfDwellings="147.6"/>
</local:HousingStockNumberList>
<local:HousingStockNumberList x:Key="SemiDetached">
<local:HousingStockNumber Period="1980-1999" ThousandsOfDwellings="234.9"/>
<local:HousingStockNumber Period="1960-1979" ThousandsOfDwellings="1852.3"/>
<local:HousingStockNumber Period="1940-1959" ThousandsOfDwellings="1651"/>
<local:HousingStockNumber Period="1920-1939" ThousandsOfDwellings="1852.3"/>
<local:HousingStockNumber Period="1900-1919" ThousandsOfDwellings="275.2"/>
</local:HousingStockNumberList>
<local:HousingStockNumberList x:Key="Terraced">
<local:HousingStockNumber Period="1980-1999" ThousandsOfDwellings="288.6"/>
<local:HousingStockNumber Period="1960-1979" ThousandsOfDwellings="966.4"/>
<local:HousingStockNumber Period="1940-1959" ThousandsOfDwellings="751.7"/>
<local:HousingStockNumber Period="1920-1939" ThousandsOfDwellings="1020.1"/>
<local:HousingStockNumber Period="1900-1919" ThousandsOfDwellings="798.7"/>
</local:HousingStockNumberList>
<ControlTemplate x:Key="CustomTooltipTemplate">
<Border BorderBrush="Black" BorderThickness="1" Margin="15,0,0,0" >
<Grid Margin="0" Background="LightGray" >
<StackPanel Orientation="Horizontal" >
<TextBlock Text="{Binding ThousandsOfDwellings, StringFormat='F01'}" />
<TextBlock Margin="5,0" Text="thousand dwellings built" />
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
</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="UK Housing Construction (1900-1999)" HorizontalAlignment="Center"
Grid.Row="0" PlotAreaBorderStyle="{StaticResource NoBorder}" LegendPosition="OutsideTopRight" >
<!-- Add zoom to the chart -->
<charts:Chart.Behaviour>
<charts:ZoomBehaviour/>
</charts:Chart.Behaviour>
<!-- Define the Y-Axis -->
<charts:Chart.YAxis>
<charts:CategoryAxis ShowGridStripes="False"
ShowMajorGridlines="False"/>
</charts:Chart.YAxis>
<!-- Define the X-Axis -->
<charts:Chart.XAxis>
<charts:LinearAxis Title="Dwellings built (thousands)"
ShowMinorTicks="False"
ShowMajorGridlines="False"/>
</charts:Chart.XAxis>
<charts:Chart.Series>
<charts:StackedBarSeries x:Name="StackedBarSeries"
StackingMode="{Binding SelectedItem, ElementName=StackingMode}">
<charts:BarSeries ToolTipEnabled="True" ToolTipTemplate="{StaticResource CustomTooltipTemplate}" SelectionMode="Series" HighlightingEnabled="True">
<!-- Defining the data source using data binding -->
<charts:BarSeries.DataSeries>
<charts:BindableDataSeries Title="Flats"
ItemsSource="{StaticResource FlatOrApartment}"
XValueBinding="{Binding Path=ThousandsOfDwellings}"
YValueBinding="{Binding Path=Period}"/>
</charts:BarSeries.DataSeries>
</charts:BarSeries>
<charts:BarSeries ToolTipEnabled="True" ToolTipTemplate="{StaticResource CustomTooltipTemplate}" SelectionMode="Series" HighlightingEnabled="True">
<!-- Defining the data source using data binding -->
<charts:BarSeries.DataSeries>
<charts:BindableDataSeries Title="Bungalows"
ItemsSource="{StaticResource Bungalow}"
XValueBinding="{Binding Path=ThousandsOfDwellings}"
YValueBinding="{Binding Path=Period}"/>
</charts:BarSeries.DataSeries>
</charts:BarSeries>
<charts:BarSeries ToolTipEnabled="True" ToolTipTemplate="{StaticResource CustomTooltipTemplate}" SelectionMode="Series" HighlightingEnabled="True">
<!-- Defining the data source using data binding -->
<charts:BarSeries.DataSeries>
<charts:BindableDataSeries Title="Detached"
ItemsSource="{StaticResource Detached}"
XValueBinding="{Binding Path=ThousandsOfDwellings}"
YValueBinding="{Binding Path=Period}"/>
</charts:BarSeries.DataSeries>
</charts:BarSeries>
<charts:BarSeries ToolTipEnabled="True" ToolTipTemplate="{StaticResource CustomTooltipTemplate}" SelectionMode="Series" HighlightingEnabled="True">
<!-- Defining the data source using data binding -->
<charts:BarSeries.DataSeries>
<charts:BindableDataSeries Title="Semi-Detached"
ItemsSource="{StaticResource SemiDetached}"
XValueBinding="{Binding Path=ThousandsOfDwellings}"
YValueBinding="{Binding Path=Period}"/>
</charts:BarSeries.DataSeries>
</charts:BarSeries>
<charts:BarSeries ToolTipEnabled="True" ToolTipTemplate="{StaticResource CustomTooltipTemplate}" SelectionMode="Series" HighlightingEnabled="True">
<!-- Defining the data source using data binding -->
<charts:BarSeries.DataSeries>
<charts:BindableDataSeries Title="Terraced"
ItemsSource="{StaticResource Terraced}"
XValueBinding="{Binding Path=ThousandsOfDwellings}"
YValueBinding="{Binding Path=Period}"/>
</charts:BarSeries.DataSeries>
</charts:BarSeries>
</charts:StackedBarSeries>
</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;
using System.Windows.Input;
namespace Visiblox.Charts.Examples.StackedBarChart
{
/// <summary>
/// An example displaying stacked bar charts which can optionally
/// be displayed as percentages or absolute values
/// </summary>
public partial class StackedBarChartExample : UserControl
{
public StackedBarChartExample()
{
InitializeComponent();
var series = MainChart.Series.First() as IChartMultipleSeries;
foreach (BarSeries barSeries in series.Series)
{
barSeries.HighlightedStyle = barSeries.SelectedStyle;
barSeries.MouseEnter += new MouseEventHandler(barSeries_MouseEnter);
barSeries.MouseLeave += new MouseEventHandler(barSeries_MouseLeave);
}
}
/// <summary>
/// Mouse has entered one of the bar datapoints - set cursor to hand
/// </summary>
void barSeries_MouseEnter(object sender, MouseEventArgs e)
{
this.Cursor = Cursors.Hand;
}
/// <summary>
/// Mouse has left one of the bar datapoints - set cursor to arrow
/// </summary>
void barSeries_MouseLeave(object sender, MouseEventArgs e)
{
this.Cursor = Cursors.Arrow;
}
private void Stacked_Checked(object sender, RoutedEventArgs e)
{
if (MainChart == null)
return;
var series = MainChart.Series.First() as StackedBarSeries;
series.StackingMode = StackingMode.Normal;
MainChart.XAxis.Title = "Dwellings built (thousands)";
}
private void OneHundredStacked_Checked(object sender, RoutedEventArgs e)
{
if (MainChart == null)
return;
var series = MainChart.Series.First() as StackedBarSeries;
series.StackingMode = StackingMode.HundredPercent;
MainChart.XAxis.Title = "Dwellings built (%)";
}
}
// Data Model
public class HousingStockNumberList : List<HousingStockNumber> { }
public class HousingStockNumber
{
public String Period { get; set; }
public double ThousandsOfDwellings { 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
