Help with a Grouped Stacked Column Chart
Hi,
I'm hoping you can help me. I'm using Syncfusion Charts in Blazor and have some data to show. This is a Stacked Column chart and was working great, till I added in more data and a new field for FiscalYear. I would like to show instead of one tall stacked charts, one per fiscal year by month.
So for the data below, under July, there would be 2 stacked charts next to each other, one with 2024 data (Agreements, Enrichment, Ad-Hoc all on top of each other) and then next to it the same thing, but for 2025. Then same deal for August, etc.
So I want a total of 10 columns made up of 5 groups of 2. One group per month, one column in each group per fiscal year
I did it in Excel to show what I am looking for. I also have the code I'm using, but that is giving me just one column per month, not one per month per year and they are on top of each other.
Ideally I would be able to filter out a year and also filter out (like I currently can) the 3 different types of data (Agreements, Enrichment and Ad-Hoc)
MY DATA:
| FiscalYear | Month | Agreement | AdHoc | Enrichment | MappingName |
| 2024 | 7 | $ 2,235,041.55 | $ 29,115.11 | $ 344,159.11 | July |
| 2024 | 8 | $ 1,609,229.92 | $ 26,494.75 | $ 302,860.02 | August |
| 2024 | 9 | $ 1,770,152.91 | $ 24,110.22 | $ 266,516.81 | September |
| 2024 | 10 | $ 1,628,540.67 | $ 28,932.27 | $ 205,217.95 | October |
| 2024 | 11 | $ 1,498,257.42 | $ 34,718.72 | $ 158,017.82 | November |
| 2025 | 7 | $ 2,335,041.55 | $ 35,147.44 | $ 410,388.41 | July |
| 2025 | 8 | $ 1,587,828.25 | $ 31,984.17 | $ 377,557.34 | August |
| 2025 | 9 | $ 1,746,611.08 | $ 22,388.92 | $ 332,250.46 | September |
| 2025 | 10 | $ 1,921,272.19 | $ 29,105.60 | $ 315,637.93 | October |
| 2025 | 11 | $ 1,767,570.41 | $ 34,926.71 | $ 243,041.21 | November |
WHAT I WANT (roughly):
WHAT I HAVE:
MY CODE: (MyChart.razor):
@using System.Globalization
<div class="control-section" align='center'>
<SfChart Title="Billing by Month & Type" Width="@Width" Theme="@Theme">
<ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
<ChartEvents OnAxisLabelRender="axisLabel"></ChartEvents>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1" LabelIntersectAction="LabelIntersectAction.Rotate45">
<ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
<ChartAxisMinorGridLines Width="0"></ChartAxisMinorGridLines>
<ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
<ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis Title="Invoicing Amount">
<ChartAxisMinorGridLines Width="1"></ChartAxisMinorGridLines>
<ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
<ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
<ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
</ChartPrimaryYAxis>
<ChartSeriesCollection>
@foreach (var year in FiscalYears)
{
var agreementsYear = $"Agreements ({year})";
var enrichmentsYear = $"Enrichment ({year})";
var adhocYear = $"Ad-Hoc ({year})";
<ChartSeries ColumnWidth="0.3" DataSource="@ChartPoints.Where(p => p.FiscalYear == year)" XName="MappingName" YName="Agreements" Width="2" Name="@agreementsYear" Type="ChartSeriesType.StackingColumn" StackingGroup="Fiscal@year">
<ChartSeriesBorder Width="1" Color="#ffffff"></ChartSeriesBorder>
</ChartSeries>
<ChartSeries ColumnWidth="0.3" DataSource="@ChartPoints.Where(p => p.FiscalYear == year)" XName="MappingName" YName="Enrichment" Width="2" Name="@enrichmentsYear" Type="ChartSeriesType.StackingColumn" StackingGroup="Fiscal@year">
<ChartSeriesBorder Width="1" Color="#ffffff"></ChartSeriesBorder>
</ChartSeries>
<ChartSeries ColumnWidth="0.3" DataSource="@ChartPoints.Where(p => p.FiscalYear == year)" XName="MappingName" YName="AdHoc" Width="2" Name="@adhocYear" Type="ChartSeriesType.StackingColumn" StackingGroup="Fiscal@year">
<ChartSeriesBorder Width="1" Color="#ffffff"></ChartSeriesBorder>
</ChartSeries>
}
</ChartSeriesCollection>
<ChartTooltipSettings Enable="true"></ChartTooltipSettings>
<ChartLegendSettings Visible="true" EnableHighlight="true"></ChartLegendSettings>
</SfChart>
</div>
@code {
[Parameter]
public string CustomerToken { get; set; } = string.Empty;
private Theme Theme { get; set; }
public string Width { get; set; } = "90%";
public double Rotation { get; set; } = 0;
public LabelIntersectAction Label { get; set; } = LabelIntersectAction.Trim;
// Dynamically calculate the distinct Fiscal Years from the dataset
public List<int> FiscalYears { get; set; } = GetFiscalYears();
public List<StackedColumnChartData> ChartPoints { get; set; } = GetChartPoints();
void axisLabel(AxisLabelRenderEventArgs args)
{
if (args.Value > 999999 || args.Value < -999999)
{
args.Text = args.Value.ToString("0,,.##M", CultureInfo.InvariantCulture);
}
}
// Dynamically retrieve distinct fiscal years from the data
public static List<int> GetFiscalYears()
{
return GetChartPoints().Select(p => p.FiscalYear).Distinct().ToList();
}
public static List<StackedColumnChartData> GetChartPoints()
{
var list = new List<StackedColumnChartData> {
new StackedColumnChartData { Month = 7, FiscalYear = 2024, Agreements = 2104751.52, AdHoc = 248211.11, Enrichment = 451211.11, MappingName = "July" },
new StackedColumnChartData { Month = 8, FiscalYear = 2024, Agreements = 1671544.08, AdHoc = 118451.56, Enrichment = 151451.56, MappingName = "August" },
new StackedColumnChartData { Month = 9, FiscalYear = 2024, Agreements = 1671544.08, AdHoc = 198451.56, Enrichment = 251451.56, MappingName = "September" },
new StackedColumnChartData { Month = 10, FiscalYear = 2024, Agreements = 1671544.08, AdHoc = 118451.56, Enrichment = 151451.56, MappingName = "October" },
new StackedColumnChartData { Month = 11, FiscalYear = 2024, Agreements = 1671544.08, AdHoc = 118515.11, Enrichment = 151515.11, MappingName = "November" },
new StackedColumnChartData { Month = 7, FiscalYear = 2025, Agreements = 2204751.52, AdHoc = 248211.11, Enrichment = 451211.11, MappingName = "July" },
new StackedColumnChartData { Month = 8, FiscalYear = 2025, Agreements = 1871544.08, AdHoc = 128451.56, Enrichment = 251451.56, MappingName = "August" },
new StackedColumnChartData { Month = 9, FiscalYear = 2025, Agreements = 1871544.08, AdHoc = 158451.56, Enrichment = 451451.56, MappingName = "September" },
new StackedColumnChartData { Month = 10, FiscalYear = 2025, Agreements = 1871544.08, AdHoc = 128451.56, Enrichment = 251451.56, MappingName = "October" },
new StackedColumnChartData { Month = 11, FiscalYear = 2025, Agreements = 1871544.08, AdHoc = 128515.11, Enrichment = 251515.11, MappingName = "November" },
};
return list;
}
public class StackedColumnChartData
{
public int Month { get; set; } = 0;
public int FiscalYear { get; set; } = 0;
public double Agreements { get; set; } = 0;
public double AdHoc { get; set; } = 0;
public double Enrichment { get; set; } = 0;
public string MappingName { get; set; } = "";
public string TypeWithYear { get; set; } = "";
}
}
I think I found what I needed... I based it off of a 3d example you have, but stripped out the 3d stuff... https://blazor.syncfusion.com/demos/chart-3d/stacked-column
Maybe consider adding an example like this that's not 3d to your regular charts, maybe next to this https://blazor.syncfusion.com/demos/chart/stacked-column
Here is my code, for what it's worth. I'm open to any suggestions
https://blazorplayground.syncfusion.com/hZhpCXVBPCEzIoQM
