Ticket T1279666
Visible to All Users

ChartControl of PivotGrid - SideBySideStackedBar - Problem with the StackGroup

created 2 days ago (modified 2 days ago)

Hello.

In our application we are trying to resolve this:

We have a Pivot Grid and their content is displayed in a ChartControl:

Clipboard-File-1.png

We have 2 row Fields:

  1. Month
  2. Year

One Column: "Justified"
And the total count.

We are using the "Bar Stacked" display mode, but we want to use the "Side by Side Stacked Bar" and achieve something like this:

This is just an example image
Clipboard-File-2.png

However, we are not achieving this outcome…

I created a Simple sample Application Trying to achieve that (I attach the Application inside this comment)
Clipboard-File-3.png

C#
public partial class Form1 : Form { public Form1() { InitializeComponent(); LoadPivotChart(); } private void LoadPivotChart() { DataTable dt = GenerateData(); pivotGridControl1.DataSource = dt; pivotGridControl1.Fields.Clear(); PivotGridField fieldMonth = new PivotGridField("Month", PivotArea.RowArea) { Caption = "Month" }; PivotGridField fieldYear = new PivotGridField("Year", PivotArea.RowArea) { Caption = "Year" }; PivotGridField fieldJustified = new PivotGridField("Justified", PivotArea.ColumnArea) { Caption = "Justified" }; PivotGridField fieldCount = new PivotGridField("Justified", PivotArea.DataArea) { SummaryType = PivotSummaryType.Count, Caption = "Count" }; pivotGridControl1.Fields.AddRange(new PivotGridField[] { fieldYear, fieldMonth, fieldJustified, fieldCount }); pivotGridControl1.Cells.Selection = new Rectangle(0, 0, pivotGridControl1.Cells.ColumnCount, pivotGridControl1.Cells.RowCount); chartControl1.SeriesDataMember = "Series"; chartControl1.SeriesTemplate.ArgumentDataMember = "Arguments"; chartControl1.SeriesTemplate.ValueDataMembers.AddRange(new string[] { "Values" }); chartControl1.DataSource = pivotGridControl1; chartControl1.SeriesTemplate.ChangeView(ViewType.SideBySideStackedBar); } private DataTable GenerateData() { DataTable dt = new DataTable("Results"); dt.Columns.Add("Year", typeof(string)); dt.Columns.Add("Month", typeof(string)); dt.Columns.Add("Justified", typeof(string)); AddData(dt, "2024", "1. January", 12, 24); AddData(dt, "2025", "1. January", 5, 19); AddData(dt, "2024", "2. February", 8, 14); AddData(dt, "2025", "2. February", 20, 3); AddData(dt, "2024", "3. March", 7, 22); AddData(dt, "2025", "3. March", 11, 16); AddData(dt, "2024", "4. April", 9, 5); AddData(dt, "2025", "4. April", 21, 17); AddData(dt, "2024", "5. May", 14, 6); AddData(dt, "2025", "5. May", 18, 12); AddData(dt, "2024", "6. June", 3, 25); AddData(dt, "2025", "6. June", 7, 9); return dt; } private void AddData(DataTable dt, string year, string month, int justifiedRows, int notJustifiedRows) { for (int i = 0; i < justifiedRows; i++) { dt.Rows.Add(new object[] { year, month, "Justified" }); } for (int i = 0; i < notJustifiedRows; i++) { dt.Rows.Add(new object[] { year, month, "Not justified" }); } } }

The Goal is similar to the image of this:
Side-by-Side Stacked Bar | WPF Controls | DevExpress Documentation
Clipboard-File-4.png

The Country is The "Month" and the 2 side by side are the "years" (in the prev image, male / female)

So I saw that Exists the Property: StackedGroup however this StackedGroup property should be seted to the Series of the the Chart.

However, the Serie is Autogenerated due the Data is from the Pivot.

How I can achieve to be the years side by side together?

Thank you very much for the help. Feel free of modifying the code that I provided to show it like an example, thanks!

Answers approved by DevExpress Support

created 2 days ago

Hello Andreu,

Thank you for the detailed description and the sample project.

To resolve the issue, simply reorder the row hierarchy of your pivot grid from YearMonth to MonthYear.

Clipboard-File-1.png


If you want the bars to be grouped and spaced close together as in the image, you need to define a StackGroup as you mentioned and set it based on the current Year value of each individual series. Additionally, if you also want them to show only two Series/Legends, set the ShowInLegend property of other Series, aside from the first two, to False. Then configure the series colors to match them. You can do this manually with the SeriesBase.ColorDataMember property or use Colorizers.

Clipboard-File-2.png

I attached a modified version of your sample project to demonstrate this approach.


If you still want to maintain the current layout and avoid restructuring it, subscribe to the CustomChartDataSourceData event and execute logic that modifies the pivot grid layout before it is passed to the chart as a datasource.

Please let me know if this helps.

Regards,
Steven

    Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

    Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.