Merge pull request #568 from apexcharts/add-clustered-legend-options

Add clustered legend options
apexcharts · Jan 8, 2025 · e23e11f · e23e11f
2 parents 069ed67 + 14d5dda
commit e23e11f
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 34 deletions.
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/BarCharts/GroupStacked.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/BarCharts/GroupStacked.razor
@@ -1,49 +1,49 @@
 <DemoContainer>
     <ApexChart TItem="Order"
-               Title="Order Net Value"
-               Options=options>
+    Title="Order Net Value"
+    Options=options Debug="true">
 
         <ApexPointSeries TItem="Order"
-                         Items="Orders"
-                         Name="Gross Value Budget"
-                         Group="Budget"
-                         SeriesType="SeriesType.Bar"
-                         XValue="@(e => e.Country)"
-                         YAggregate="@(e => e.Sum(e => e.GrossValue) - 10000)"
-                         OrderByDescending="e=>e.Y"
-                         ShowDataLabels />
+        Items="Orders"
+        Name="Gross Value Budget"
+        Group="Budget"
+        SeriesType="SeriesType.Bar"
+        XValue="@(e => e.Country)"
+        YAggregate="@(e => e.Sum(e => e.GrossValue) - 10000)"
+        OrderByDescending="e=>e.Y"
+        ShowDataLabels />
 
         <ApexPointSeries TItem="Order"
-                         Items="Orders"
-                         Name="Gross Value"
-                         Group="Actual"
-                         SeriesType="SeriesType.Bar"
-                         XValue="@(e => e.Country)"
-                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
-                         OrderByDescending="e=>e.Y"
-                         ShowDataLabels />
+        Items="Orders"
+        Name="Gross Value"
+        Group="Actual"
+        SeriesType="SeriesType.Bar"
+        XValue="@(e => e.Country)"
+        YAggregate="@(e => e.Sum(e => e.GrossValue))"
+        OrderByDescending="e=>e.Y"
+        ShowDataLabels />
 
 
 
         <ApexPointSeries TItem="Order"
-                         Items="Orders"
-                         Name="Net Value Budget"
-                         Group="Budget"
-                         SeriesType="SeriesType.Bar"
-                         XValue="@(e => e.Country)"
-                         YAggregate="@(e => e.Sum(e => e.NetValue))"
-                         OrderByDescending="e=>e.Y"
-                         ShowDataLabels />
+        Items="Orders"
+        Name="Net Value Budget"
+        Group="Budget"
+        SeriesType="SeriesType.Bar"
+        XValue="@(e => e.Country)"
+        YAggregate="@(e => e.Sum(e => e.NetValue))"
+        OrderByDescending="e=>e.Y"
+        ShowDataLabels />
 
         <ApexPointSeries TItem="Order"
-                         Items="Orders"
-                         Name="Net Value"
-                         Group="Actual"
-                         SeriesType="SeriesType.Bar"
-                         XValue="@(e => e.Country)"
-                         YAggregate="@(e => e.Sum(e => e.NetValue))"
-                         OrderByDescending="e=>e.Y"
-                         ShowDataLabels />
+        Items="Orders"
+        Name="Net Value"
+        Group="Actual"
+        SeriesType="SeriesType.Bar"
+        XValue="@(e => e.Country)"
+        YAggregate="@(e => e.Sum(e => e.NetValue))"
+        OrderByDescending="e=>e.Y"
+        ShowDataLabels />
     </ApexChart>
 </DemoContainer>
 @code {
@@ -66,6 +66,7 @@
                         Horizontal = true
                     }
                 },
+                Legend = new Legend {  ClusterGroupedSeriesOrientation = ClusterGroupedSeriesOrientation.Horizontal },
                 Colors = new List<string> { "#80c7fd", "#008FFB", "#80f1cb", "#00E396" },
                 Xaxis = new XAxis { Categories = new List<string> { "Category1", "Category2", "Category3", "Category4" } }
             };

diff --git a/src/Blazor-ApexCharts/Models/ApexChartOptions.cs b/src/Blazor-ApexCharts/Models/ApexChartOptions.cs
@@ -2321,8 +2321,22 @@ public class Legend
         /// Allows you to overwrite the default legend items with this customized set of labels. Please note that the click/hover events of the legend will stop working if you provide these custom legend labels.
         /// </summary>
         public List<string> CustomLegendItems { get; set; }
+
+        /// <summary>
+        ///  Indicates if the Legends should grouped by Cluster
+        ///  Default is true in Apexcharts.js
+        /// </summary>
+        public bool? ClusterGroupedSeries { get; set; }
+
+        /// <summary>
+        /// Orientation for the Clustered Grouped Series
+        /// </summary>
+        public ClusterGroupedSeriesOrientation? ClusterGroupedSeriesOrientation { get; set; }
+
     }
 
+
+
     /// <summary>
     /// Undocumented, this class exists in the TypeScript definition
     /// </summary>
@@ -5521,6 +5535,15 @@ public enum ShapeEnum
         Rect
     };
 
+    /// <summary>
+    /// Orientation options for the Clustered Grouped Series
+    /// </summary>
+    public enum ClusterGroupedSeriesOrientation
+    {
+        Horizontal,
+        Vertical
+    };
+
     /// <summary>
     /// A list of alignment options for vertical placement
     /// </summary>