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

C#

public class BarSeriesView :
    CartesianSeriesView,
    ISupportPercentValue

VB.NET

Public Class BarSeriesView
    Inherits CartesianSeriesView
    Implements 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 a DataTemplate 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:

  • DataSource.PointSource
  • DataSource.ArgumentDataMember
  • DataSource.ValueDataMember

• 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.

XAML

<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>

C#

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; }

    }
}

VB.NET

Imports DevExpress.Mvvm
Imports Microsoft.UI.Xaml
Imports System.Collections.Generic

Namespace StackedSeriesChart
    Public NotInheritable Partial Class MainWindow
        Inherits Window

        Public Sub New()
            Me.InitializeComponent()
        End Sub
    End Class

    Public Class ChartViewModel
        Inherits ViewModelBase

        Public ReadOnly Property SeriesData As List(Of SeriesViewModel)

        Public Sub New()
            Dim seriesData As List(Of SeriesViewModel) = New List(Of SeriesViewModel) From {
                New SeriesViewModel With {
                    .Name = "Canada",
                    .Group = 0,
                    .DataPoints = New List(Of DataPoint) From {
                        New DataPoint With {
                            .Argument = "March",
                            .Value = 125.45
                        },
                        New DataPoint With {
                            .Argument = "April",
                            .Value = 144.3
                        },
                        New DataPoint With {
                            .Argument = "May",
                            .Value = 133.54
                        }
                    }
                },
                New SeriesViewModel With {
                    .Name = "USA",
                    .Group = 0,
                    .DataPoints = New List(Of DataPoint) From {
                        New DataPoint With {
                            .Argument = "March",
                            .Value = 122.36
                        },
                        New DataPoint With {
                            .Argument = "April",
                            .Value = 126.87
                        },
                        New DataPoint With {
                            .Argument = "May",
                            .Value = 128.33
                        }
                    }
                },
                New SeriesViewModel With {
                    .Name = "France",
                    .Group = 1,
                    .DataPoints = New List(Of DataPoint) From {
                        New DataPoint With {
                            .Argument = "March",
                            .Value = 56.32
                        },
                        New DataPoint With {
                            .Argument = "April",
                            .Value = 58.63
                        },
                        New DataPoint With {
                            .Argument = "May",
                            .Value = 59.14
                        }
                    }
                },
                New SeriesViewModel With {
                    .Name = "Germany",
                    .Group = 1,
                    .DataPoints = New List(Of DataPoint) From {
                        New DataPoint With {
                            .Argument = "March",
                            .Value = 62.12
                        },
                        New DataPoint With {
                            .Argument = "April",
                            .Value = 69.123
                        },
                        New DataPoint With {
                            .Argument = "May",
                            .Value = 75.11
                        }
                    }
                },
                New SeriesViewModel With {
                    .Name = "Austria",
                    .Group = 1,
                    .DataPoints = New List(Of DataPoint) From {
                        New DataPoint With {
                            .Argument = "March",
                            .Value = 42.852
                        },
                        New DataPoint With {
                            .Argument = "April",
                            .Value = 41.77
                        },
                        New DataPoint With {
                            .Argument = "May",
                            .Value = 39.25
                        }
                    }
                }
            }
            Me.SeriesData = seriesData
        End Sub
    End Class

    Public Class SeriesViewModel
        Public Property Group As Integer
        Public Property Name As String
        Public Property DataPoints As List(Of DataPoint)
    End Class

    Public Class DataPoint
        Public Property Argument As String
        Public Property Value As Double
    End Class
End Namespace

Inheritance

Object

DependencyObject

UIElement

FrameworkElement

DevExpress.WinUI.Core.Internal.DXLogicalFrameworkElement

ChartFrameworkElement

SeriesView

CartesianSeriesView

BarSeriesView