BarSeriesView Class
Allows you to visualize series data points as bars and columns.
Namespace: DevExpress.WinUI.Charts
Assembly: DevExpress.WinUI.Charts.v23.2.dll
NuGet Package: DevExpress.WinUI
#Declaration
public class BarSeriesView :
CartesianSeriesView,
ISupportPercentValue
#Remarks
The BarSeriesView
allows you to draw bar charts: side-by-side bar chart, stacked bar chart, full-stacked bar chart, side-by-side stacked bar chart, and side-by-side full-stacked bar chart.
#Stack Bars
You can specify the BarSeriesView.StackedMode property to stack bars in one group (shown for the same argument) into one bar. The following modes are available: Stacked
and FullStacked
.
Side-by-side bars | Stacked bars | Full-stacked bars |
---|---|---|
![]() |
![]() |
![]() |
#Group Stacked Bars
You can show stacked bars that belong to one group in multiple groups. To specify the group in which a bar is shown, use the BarSeriesView.StackedGroup property.
Stacked bars | Stacked bars in two groups |
---|---|
![]() |
![]() |
#Specify Label Position
You can show side-by-side bar labels in the center of bars and at the top of bars. Define the BarSeriesView.SideBySideBarLabelPosition property to specify the label position. If bars are stacked, labels are always shown inside bars.
#Horizontal Bar Chart
You can enable the CartesianChart.Rotated property to rotate the entire chart and display bars horizontally:
Refer to the following section for more information: Cartesian Chart - Rotate the Chart.
#Example
The following example shows how to create a side-by-side stacked bar chart. In this example, series are created based on a collection of series view models.
- Use the ChartBase.SeriesSource property to bind the chart to a collection that contains series view models.
Define the ChartBase.SeriesItemTemplate property to specify how to convert view model objects to series. To do this, initialize the
SeriesItemTemplate
property with aDataTemplate
object. Add a Series object to the data template.Note: Use the ChartBase.SeriesItemTemplateSelector property if you need to select a series template based on a condition.
Then, you need to specify how series obtain data from the source. To do this, initialize the Series.Data with a DataSource object. Specify the following data source properties:
To visualize data source points as bars, set the Series.View property to a
BarSeriesView
object. To create a single bar from separate bar points shown for the same argument, set the StackedMode property to Stacked.You can also divide stacked bars in the same argument group into multiple groups. To do this, specify the BarSeriesView.StackedGroup property to define the target stacked group for the series.
<Window
x:Class="StackedSeriesChart.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:StackedSeriesChart"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Charts="using:DevExpress.WinUI.Charts"
mc:Ignorable="d">
<Grid>
<Grid.DataContext>
<local:ChartViewModel/>
</Grid.DataContext>
<TextBlock Text="Product Sales"
HorizontalTextAlignment="Center"
Margin="0,50,0,0"
FontSize="20"/>
<Charts:CartesianChart x:Name="chart"
ToolTipEnabled="True"
Padding="0"
SeriesSource="{Binding SeriesData}">
<Charts:CartesianChart.SeriesItemTemplate>
<DataTemplate>
<Charts:Series DisplayName="{Binding Name}">
<Charts:Series.Data>
<Charts:DataSource PointSource="{Binding DataPoints}"
ArgumentDataMember="Argument"
ValueDataMember="Value"/>
</Charts:Series.Data>
<Charts:Series.View>
<Charts:BarSeriesView StackedMode="Stacked"
StackedGroup="{Binding Group}"
ShowLabels="True"
LabelPattern="{}${V}K">
<Charts:BarSeriesView.LabelTemplate>
<DataTemplate>
<TextBlock Text="{Binding Text}"
Foreground="Black"
FontSize="10"/>
</DataTemplate>
</Charts:BarSeriesView.LabelTemplate>
</Charts:BarSeriesView>
</Charts:Series.View>
</Charts:Series>
</DataTemplate>
</Charts:CartesianChart.SeriesItemTemplate>
<Charts:CartesianChart.Legend>
<Charts:Legend />
</Charts:CartesianChart.Legend>
</Charts:CartesianChart>
</Grid>
</Window>
using DevExpress.Mvvm;
using Microsoft.UI.Xaml;
using System.Collections.Generic;
namespace StackedSeriesChart {
public sealed partial class MainWindow : Window {
public MainWindow() {
this.InitializeComponent();
}
}
public class ChartViewModel : ViewModelBase {
public List<SeriesViewModel> SeriesData { get; }
public ChartViewModel() {
List<SeriesViewModel> seriesData = new List<SeriesViewModel> {
new SeriesViewModel{ Name = "Canada", Group = 0,
DataPoints = new List<DataPoint> {
new DataPoint{ Argument = "March", Value = 125.45 },
new DataPoint{ Argument = "April", Value = 144.3 },
new DataPoint{ Argument = "May", Value = 133.54 }
}
},
new SeriesViewModel{ Name = "USA", Group = 0,
DataPoints = new List<DataPoint> {
new DataPoint{ Argument = "March", Value = 122.36 },
new DataPoint{ Argument = "April", Value = 126.87 },
new DataPoint{ Argument = "May", Value = 128.33 }
}
},
new SeriesViewModel{ Name = "France", Group = 1,
DataPoints = new List<DataPoint> {
new DataPoint{ Argument = "March", Value = 56.32 },
new DataPoint{ Argument = "April", Value = 58.63 },
new DataPoint{ Argument = "May", Value = 59.14 }
}
},
new SeriesViewModel{ Name = "Germany", Group = 1,
DataPoints = new List<DataPoint> {
new DataPoint{ Argument = "March", Value = 62.12 },
new DataPoint{ Argument = "April", Value = 69.123 },
new DataPoint{ Argument = "May", Value = 75.11 }
}
},
new SeriesViewModel{ Name = "Austria", Group = 1,
DataPoints = new List<DataPoint> {
new DataPoint{ Argument = "March", Value = 42.852 },
new DataPoint{ Argument = "April", Value = 41.77 },
new DataPoint{ Argument = "May", Value = 39.25 }
}
}
};
SeriesData = seriesData;
}
}
public class SeriesViewModel {
public int Group { get; set; }
public string Name { get; set; }
public List<DataPoint> DataPoints { get; set; }
}
public class DataPoint {
public string Argument { get; set; }
public double Value { get; set; }
}
}