Back to Devexpress

Stacked Bar Chart

windowsforms-2973-controls-and-libraries-chart-control-series-views-2d-series-views-bar-series-views-stacked-bar-chart.md

latest10.4 KB
Original Source

Stacked Bar Chart

  • Dec 17, 2021
  • 5 minutes to read

Short Description

The Stacked Bar Chart is represented by the StackedBarSeriesView object, which belongs to Bar Series Views. This view displays all the points of its series. Series values are stacked at arguments included in multiple series. So, the height of each bar is determined by the total of all the series values for the category.

A Stacked Bar chart is shown in the image below. Note that this chart type is based upon the XYDiagram, and so it can be rotated to show bars either vertically or horizontally.

Chart Type Characteristics

The table below lists the main characteristics of this chart type.

FeatureValue
Series View typeStackedBarSeriesView
Diagram type2D-XYDiagram
Number of arguments per series point1
Number of values per series point1

Note

For information on which chart types can be combined with the Stacked Bar Chart , refer to the Series Views Compatibility document.

Example

This example shows how to bind a chart control to a data source and create two Stacked Bar series based on a series template.

View Example

csharp
using System;
using System.Collections.Generic;
using System.Windows.Forms;
using DevExpress.XtraCharts;

namespace Series_StackedBarChart {
    public partial class Form1 : Form {
        public Form1() {
            InitializeComponent();
        }
        private void Form1_Load(object sender, EventArgs e) {

            // Create a chart and add it to the form:
            ChartControl chart = new ChartControl();
            chart.Dock = DockStyle.Fill;
            this.Controls.Add(chart);

            // Bind the chart to a data source:
            chart.DataSource = DataPoint.GetDataPoints();
            chart.SeriesTemplate.ChangeView(ViewType.StackedBar);
            chart.SeriesTemplate.SeriesDataMember = "Company";
            chart.SeriesTemplate.SetDataMembers("Product", "Income");

            // Enable series point labels, specify their text pattern and position:
            chart.SeriesTemplate.LabelsVisibility = DevExpress.Utils.DefaultBoolean.True;
            chart.SeriesTemplate.Label.TextPattern = "${V}M";
            ((BarSeriesLabel)chart.SeriesTemplate.Label).Position = BarSeriesLabelPosition.Center;

            // Customize series view settings (for example, bar width):
            StackedBarSeriesView view = (StackedBarSeriesView)chart.SeriesTemplate.View;
            view.BarWidth = 0.8;

            // Disable minor tickmarks on the x-axis:
            XYDiagram diagram = (XYDiagram)chart.Diagram;
            diagram.AxisX.Tickmarks.MinorVisible = false;

            // Add a chart title:
            chart.Titles.Add(new ChartTitle { Text = "Sales by Products" });

            // Specify legend settings:
            chart.Legend.MarkerMode = LegendMarkerMode.CheckBoxAndMarker;
            chart.Legend.AlignmentHorizontal = LegendAlignmentHorizontal.Center;
            chart.Legend.AlignmentVertical = LegendAlignmentVertical.TopOutside;

        }

        public class DataPoint {
            public string Product { get; set; }
            public double Income { get; set; }
            public string Company { get; set; }
            public DataPoint(string product, double income, string company) {
                this.Product = product;
                this.Income = income;
                this.Company = company;
            }
            public static List<DataPoint> GetDataPoints() {
                List<DataPoint> data = new List<DataPoint> {
                new DataPoint("Camera", 34.96, "DevAV North"),
                new DataPoint("Camcorder", 56.26, "DevAV North"),
                new DataPoint("Flash", 45.982, "DevAV North"),
                new DataPoint("Smartphone", 67.14, "DevAV North"),
                new DataPoint("Smart Watch", 51.23, "DevAV North"),
                new DataPoint("Television", 57.443, "DevAV North"),
                new DataPoint("Home Audio", 45.83, "DevAV North"),
                new DataPoint("Headphone", 51.23, "DevAV North"),

                new DataPoint("Camera", 56.48, "DevAV South"),
                new DataPoint("Camcorder", 35.123, "DevAV South"),
                new DataPoint("Flash", 36.16, "DevAV South"),
                new DataPoint("Smartphone", 39.1, "DevAV South"),
                new DataPoint("Smart Watch", 34.6, "DevAV South"),
                new DataPoint("Television", 56.16, "DevAV South"),
                new DataPoint("Home Audio", 35.38, "DevAV South"),
                new DataPoint("Headphone", 58.1 , "DevAV South")};
                return data;
            }
        }
    }
}
vb
Imports System
Imports System.Collections.Generic
Imports System.Windows.Forms
Imports DevExpress.XtraCharts

Namespace Series_StackedBarChart

    Public Partial Class Form1
        Inherits Form

        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
            ' Create a chart and add it to the form:
            Dim chart As ChartControl = New ChartControl()
            chart.Dock = DockStyle.Fill
            Me.Controls.Add(chart)
            ' Bind the chart to a data source:
            chart.DataSource = DataPoint.GetDataPoints()
            chart.SeriesTemplate.ChangeView(ViewType.StackedBar)
            chart.SeriesTemplate.SeriesDataMember = "Company"
            chart.SeriesTemplate.SetDataMembers("Product", "Income")
            ' Enable series point labels, specify their text pattern and position:
            chart.SeriesTemplate.LabelsVisibility = DevExpress.Utils.DefaultBoolean.True
            chart.SeriesTemplate.Label.TextPattern = "${V}M"
            CType(chart.SeriesTemplate.Label, BarSeriesLabel).Position = BarSeriesLabelPosition.Center
            ' Customize series view settings (for example, bar width):
            Dim view As StackedBarSeriesView = CType(chart.SeriesTemplate.View, StackedBarSeriesView)
            view.BarWidth = 0.8
            ' Disable minor tickmarks on the x-axis:
            Dim diagram As XYDiagram = CType(chart.Diagram, XYDiagram)
            diagram.AxisX.Tickmarks.MinorVisible = False
            ' Add a chart title:
            chart.Titles.Add(New ChartTitle With {.Text = "Sales by Products"})
            ' Specify legend settings:
            chart.Legend.MarkerMode = LegendMarkerMode.CheckBoxAndMarker
            chart.Legend.AlignmentHorizontal = LegendAlignmentHorizontal.Center
            chart.Legend.AlignmentVertical = LegendAlignmentVertical.TopOutside
        End Sub

        Public Class DataPoint

            Public Property Product As String

            Public Property Income As Double

            Public Property Company As String

            Public Sub New(ByVal product As String, ByVal income As Double, ByVal company As String)
                Me.Product = product
                Me.Income = income
                Me.Company = company
            End Sub

            Public Shared Function GetDataPoints() As List(Of DataPoint)
                Dim data As List(Of DataPoint) = New List(Of DataPoint) From {New DataPoint("Camera", 34.96, "DevAV North"), New DataPoint("Camcorder", 56.26, "DevAV North"), New DataPoint("Flash", 45.982, "DevAV North"), New DataPoint("Smartphone", 67.14, "DevAV North"), New DataPoint("Smart Watch", 51.23, "DevAV North"), New DataPoint("Television", 57.443, "DevAV North"), New DataPoint("Home Audio", 45.83, "DevAV North"), New DataPoint("Headphone", 51.23, "DevAV North"), New DataPoint("Camera", 56.48, "DevAV South"), New DataPoint("Camcorder", 35.123, "DevAV South"), New DataPoint("Flash", 36.16, "DevAV South"), New DataPoint("Smartphone", 39.1, "DevAV South"), New DataPoint("Smart Watch", 34.6, "DevAV South"), New DataPoint("Television", 56.16, "DevAV South"), New DataPoint("Home Audio", 35.38, "DevAV South"), New DataPoint("Headphone", 58.1, "DevAV South")}
                Return data
            End Function
        End Class
    End Class
End Namespace

Note

If you want to bind individual series to a data source, refer to the following help topic for more information: Specify Series Data Members.

See Also

XY-Diagram