Feature/dataset stack

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChartDocumentation.razor

@@ -83,6 +83,23 @@
     <Demo Type="typeof(BarChart_Demo_03_Stacked_BarChart)" Tabs="true" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H4" Name="Stacked bar chart with groups" PageUrl="@pageUrl" Link="stacked-bar-chart-with-groups">
+    <Block>
+        The <strong>Stacked Bar Chart with Groups</strong> displays multiple independent stacks side by side for each category. Datasets that share the same <code>Stack</code> value are stacked together, while datasets with different <code>Stack</code> values are rendered as separate groups.
+        <br /><br />
+        <strong>How to use:</strong>
+        <div class="content">
+            <ol>
+                <li>Enable stacking by setting <code>Options.Scales.X.Stacked</code> and <code>Options.Scales.Y.Stacked</code> to <code>true</code>.</li>
+                <li>Assign the same <code>Stack</code> value to datasets that should be stacked together.</li>
+                <li>Use different <code>Stack</code> values to render multiple stacked groups side by side for each category.</li>
+                <li>Refer to the demo code below for a working example with two grouped stacks and multiple series in each stack.</li>
+            </ol>
+        </div>
+    </Block>
+    <Demo Type="typeof(BarChart_Demo_10_Stacked_BarChart_With_Groups)" Tabs="true" />
+</Section>
+
 <Section Class="p-0" Size="HeadingSize.H4" Name="Stacked bar chart with data labels" PageUrl="@pageUrl" Link="stacked-bar-chart-with-data-labels">
     <Block>
         The <strong>Stacked Bar Chart with Data Labels</strong> enhances the standard stacked bar chart by displaying value labels directly on each bar segment. This makes it easier to read and compare the values of each dataset within a category.

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_10_Stacked_BarChart_With_Groups.razor

@@ -0,0 +1,82 @@
+<BarChart @ref="barChart" Width="600" />
+
+@code {
+    private const string DomesticStack = "domestic";
+    private const string InternationalStack = "international";
+
+    private BarChart barChart = default!;
+    private BarChartOptions barChartOptions = default!;
+    private ChartData chartData = default!;
+
+    protected override void OnInitialized()
+    {
+        var colors = ColorUtility.CategoricalTwelveColors;
+
+        chartData = new ChartData
+        {
+            Labels = new List<string> { "January", "February", "March", "April", "May", "June" },
+            Datasets = new List<IChartDataset>
+            {
+                new BarChartDataset
+                {
+                    Label = "Domestic - Direct",
+                    Stack = DomesticStack,
+                    Data = new List<double?> { 18, 22, 26, 31, 29, 35 },
+                    BackgroundColor = new List<string> { colors[0] },
+                    BorderColor = new List<string> { colors[0] },
+                    BorderWidth = new List<double> { 0 },
+                },
+                new BarChartDataset
+                {
+                    Label = "Domestic - Partner",
+                    Stack = DomesticStack,
+                    Data = new List<double?> { 12, 14, 15, 17, 16, 20 },
+                    BackgroundColor = new List<string> { colors[1] },
+                    BorderColor = new List<string> { colors[1] },
+                    BorderWidth = new List<double> { 0 },
+                },
+                new BarChartDataset
+                {
+                    Label = "International - Direct",
+                    Stack = InternationalStack,
+                    Data = new List<double?> { 10, 13, 17, 19, 22, 24 },
+                    BackgroundColor = new List<string> { colors[2] },
+                    BorderColor = new List<string> { colors[2] },
+                    BorderWidth = new List<double> { 0 },
+                },
+                new BarChartDataset
+                {
+                    Label = "International - Partner",
+                    Stack = InternationalStack,
+                    Data = new List<double?> { 8, 11, 13, 15, 18, 21 },
+                    BackgroundColor = new List<string> { colors[3] },
+                    BorderColor = new List<string> { colors[3] },
+                    BorderWidth = new List<double> { 0 },
+                },
+            },
+        };
+
+        barChartOptions = new BarChartOptions
+        {
+            Responsive = true,
+            Interaction = new Interaction { Mode = InteractionMode.Index, Intersect = false },
+        };
+
+        barChartOptions.Scales.X!.Stacked = true;
+        barChartOptions.Scales.Y!.Stacked = true;
+
+        barChartOptions.Scales.X.Title = new ChartAxesTitle { Text = "Month", Display = true };
+        barChartOptions.Scales.Y.Title = new ChartAxesTitle { Text = "Revenue", Display = true };
+
+        barChartOptions.Plugins.Title!.Text = "Revenue by market and channel";
+        barChartOptions.Plugins.Title.Display = true;
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await barChart.InitializeAsync(chartData, barChartOptions);
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+}

BlazorExpress.ChartJS/Models/ChartDataset/BarChart/BarChartDataset.cs

@@ -275,8 +275,20 @@ public BarChartDataset()
     [Description("If <b>true</b>, null or undefined values will not be used for spacing calculations when determining bar size.")]
     public bool SkipNull { get; set; }
 
-    //Stack
-    //https://www.chartjs.org/docs/latest/charts/bar.html#general
+    /// <summary>
+    /// The ID of the group to which this dataset belongs. Datasets sharing the same
+    /// stack are stacked together; datasets with different stacks render side by side.
+    /// <para>
+    /// Default value is <see langword="null" />.
+    /// </para>
+    /// <see href="https://www.chartjs.org/docs/latest/charts/bar.html#general" />
+    /// </summary>
+    [AddedVersion("1.2.3")]
+    [DefaultValue(null)]
+    [Description("The ID of the group to which this dataset belongs. Datasets sharing the same stack are stacked together; datasets with different stacks render side by side.")]
+    [ParameterTypeName("string?")]
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? Stack { get; set; }
 
     /// <summary>
     /// The ID of the x-axis to plot this dataset on.

BlazorExpress.ChartJS/Models/ChartDataset/LineChart/LineChartDataset.cs

@@ -563,8 +563,21 @@ public LineChartDataset FillToValue(double value)
     [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
     public bool? SpanGaps { get; set; }
 
-    //stack
-    //https://www.chartjs.org/docs/latest/charts/line.html#general
+    /// <summary>
+    /// The ID of the group to which this dataset belongs. On a stacked scale,
+    /// datasets sharing the same stack are stacked together; datasets with
+    /// different stacks are drawn independently.
+    /// <para>
+    /// Default value is <see langword="null" />.
+    /// </para>
+    /// <see href="https://www.chartjs.org/docs/latest/charts/line.html#general" />
+    /// </summary>
+    [AddedVersion("1.2.3")]
+    [DefaultValue(null)]
+    [Description("The ID of the group to which this dataset belongs. Datasets sharing the same stack are stacked together; datasets with different stacks are drawn independently.")]
+    [ParameterTypeName("string?")]
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? Stack { get; set; }
 
     /// <summary>
     /// If the stepped value is set to anything other than <see langword="false"/>, tension will be ignored.