wpf-6863-controls-and-libraries-charts-suite-chart-control-examples-2d-chart-types-how-to-create-a-2d-full-stacked-bar-chart.md
This example demonstrates how to create a 2D Full-Stacked Bar chart.
Create a ChartControl and set its ChartControl.Diagram property to a XYDiagram2D object.
Specify the Diagram.SeriesItemsSource property to bind a collection of objects used to generate series.
Add an Legend to the ChartControlBase.Legends collection. Refer to the Legend topic for more information about legends.
Add an Title to the ChartControlBase.Titles collection. Define the title’s Content and HorizontalAlignment properties. Refer to the Chart Titles topic for more information about titles.
Use the following API members to configure the axis options.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
xmlns:local="clr-namespace:FullStackedBar2DChart"
x:Class="FullStackedBar2DChart.Window1"
Title="Window1" Height="450" Width="750">
<Window.DataContext>
<local:ChartViewModel/>
</Window.DataContext>
<Grid>
<dxc:ChartControl>
<dxc:ChartControl.Titles>
<dxc:Title Content="Sales by Regions"
HorizontalAlignment="Center"/>
</dxc:ChartControl.Titles>
<dxc:ChartControl.Legends>
<dxc:Legend/>
</dxc:ChartControl.Legends>
<dxc:XYDiagram2D SeriesItemsSource="{Binding SaleSeries}">
<dxc:XYDiagram2D.SeriesItemTemplate>
<DataTemplate>
<dxc:BarFullStackedSeries2D DisplayName="{Binding Category}"
DataSource="{Binding Values}"
ArgumentDataMember="Region"
ValueDataMember="Value">
</dxc:BarFullStackedSeries2D>
</DataTemplate>
</dxc:XYDiagram2D.SeriesItemTemplate>
<dxc:XYDiagram2D.AxisY>
<dxc:AxisY2D>
<dxc:AxisY2D.Label>
<dxc:AxisLabel TextPattern="{}{VP:P0}"/>
</dxc:AxisY2D.Label>
<dxc:AxisY2D.NumericScaleOptions>
<dxc:ContinuousNumericScaleOptions AutoGrid="False"
GridSpacing="0.2"/>
</dxc:AxisY2D.NumericScaleOptions>
</dxc:AxisY2D>
</dxc:XYDiagram2D.AxisY>
<dxc:XYDiagram2D.AxisX>
<dxc:AxisX2D TickmarksMinorVisible="False"/>
</dxc:XYDiagram2D.AxisX>
</dxc:XYDiagram2D>
</dxc:ChartControl>
</Grid>
</Window>
using System.Collections.ObjectModel;
using System.Windows;
namespace FullStackedBar2DChart {
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window {
public Window1() {
InitializeComponent();
}
}
public class ChartViewModel {
public ObservableCollection<SaleSeries> SaleSeries { get; private set; }
public ChartViewModel() {
SaleSeries = new ObservableCollection<SaleSeries> {
new SaleSeries {
Category = "Video players",
Values = new ObservableCollection<SaleInfo> {
new SaleInfo { Region = "Asia", Value = 853D},
new SaleInfo { Region = "Australia", Value = 321D},
new SaleInfo { Region = "Europe", Value = 655D},
new SaleInfo { Region = "North America", Value = 1325D},
new SaleInfo { Region = "South America", Value = 653D}
}
},
new SaleSeries {
Category = "Automation",
Values = new ObservableCollection<SaleInfo> {
new SaleInfo { Region = "Asia", Value = 172D},
new SaleInfo { Region = "Australia", Value = 255D},
new SaleInfo { Region = "Europe", Value = 981D},
new SaleInfo { Region = "North America", Value = 963D},
new SaleInfo { Region = "South America", Value = 123D},
}
},
new SaleSeries {
Category = "Monitors",
Values = new ObservableCollection<SaleInfo> {
new SaleInfo { Region = "Asia", Value = 1011D},
new SaleInfo { Region = "Australia", Value = 359D},
new SaleInfo { Region = "Europe", Value = 721D},
new SaleInfo { Region = "North America", Value = 565D},
new SaleInfo { Region = "South America", Value = 532D},
}
},
new SaleSeries {
Category = "Projectors",
Values = new ObservableCollection<SaleInfo> {
new SaleInfo { Region = "Asia", Value = 998D},
new SaleInfo { Region = "Australia", Value = 222D},
new SaleInfo { Region = "Europe", Value = 865D},
new SaleInfo { Region = "North America", Value = 787D},
new SaleInfo { Region = "South America", Value = 332D},
}
},
new SaleSeries {
Category = "Televisions",
Values = new ObservableCollection<SaleInfo> {
new SaleInfo { Region = "Asia", Value = 1356D},
new SaleInfo { Region = "Australia", Value = 232D},
new SaleInfo { Region = "Europe", Value = 1323D},
new SaleInfo { Region = "North America", Value = 1125D},
new SaleInfo { Region = "South America", Value = 865D}
}
},
};
}
}
public class SaleSeries {
public string Category { get; set; }
public ObservableCollection<SaleInfo> Values { get; set; }
}
public class SaleInfo {
public string Region { get; set; }
public double Value { get; set; }
}
}
Imports System.Collections.ObjectModel
Imports System.Windows
Namespace FullStackedBar2DChart
''' <summary>
''' Interaction logic for Window1.xaml
''' </summary>
Partial Public Class Window1
Inherits Window
Public Sub New()
InitializeComponent()
End Sub
End Class
Public Class ChartViewModel
Private privateSaleSeries As ObservableCollection(Of SaleSeries)
Public Property SaleSeries() As ObservableCollection(Of SaleSeries)
Get
Return privateSaleSeries
End Get
Private Set(ByVal value As ObservableCollection(Of SaleSeries))
privateSaleSeries = value
End Set
End Property
Public Sub New()
SaleSeries = New ObservableCollection(Of SaleSeries) _
From {
New SaleSeries With {
.Category = "Video players",
.Values = New ObservableCollection(Of SaleInfo) From {
New SaleInfo With { .Region = "Asia", .Value = 853R },
New SaleInfo With { .Region = "Australia", .Value = 321R },
New SaleInfo With { .Region = "Europe", .Value = 655R },
New SaleInfo With { .Region = "North America", .Value = 1325R },
New SaleInfo With { .Region = "South America", .Value = 653R }
}
},
New SaleSeries With {
.Category = "Automation",
.Values = New ObservableCollection(Of SaleInfo) From {
New SaleInfo With { .Region = "Asia", .Value = 172R },
New SaleInfo With { .Region = "Australia", .Value = 255R },
New SaleInfo With { .Region = "Europe", .Value = 981R },
New SaleInfo With { .Region = "North America", .Value = 963R },
New SaleInfo With { .Region = "South America", .Value = 123R }
}
},
New SaleSeries With {
.Category = "Monitors",
.Values = New ObservableCollection(Of SaleInfo) From {
New SaleInfo With { .Region = "Asia", .Value = 1011R },
New SaleInfo With { .Region = "Australia", .Value = 359R },
New SaleInfo With { .Region = "Europe", .Value = 721R },
New SaleInfo With { .Region = "North America", .Value = 565R },
New SaleInfo With { .Region = "South America", .Value = 532R }
}
},
New SaleSeries With {
.Category = "Projectors",
.Values = New ObservableCollection(Of SaleInfo) From {
New SaleInfo With { .Region = "Asia", .Value = 998R },
New SaleInfo With { .Region = "Australia", .Value = 222R },
New SaleInfo With { .Region = "Europe", .Value = 865R },
New SaleInfo With { .Region = "North America", .Value = 787R },
New SaleInfo With { .Region = "South America", .Value = 332R }
}
},
New SaleSeries With {
.Category = "Televisions",
.Values = New ObservableCollection(Of SaleInfo) From {
New SaleInfo With { .Region = "Asia", .Value = 1356R },
New SaleInfo With { .Region = "Australia", .Value = 232R },
New SaleInfo With { .Region = "Europe", .Value = 1323R },
New SaleInfo With { .Region = "North America", .Value = 1125R },
New SaleInfo With { .Region = "South America", .Value = 865R }
}
}
}
End Sub
End Class
Public Class SaleSeries
Public Property Category() As String
Public Property Values() As ObservableCollection(Of SaleInfo)
End Class
Public Class SaleInfo
Public Property Region() As String
Public Property Value() As Double
End Class
End Namespace