fix #3907; group legends in grouped-stacked charts

apexcharts · Nov 29, 2024 · 4356a6b · 4356a6b
1 parent 63435e1
commit 4356a6b
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 69 deletions.
diff --git a/samples/react/bar/grouped-stacked-bar.html b/samples/react/bar/grouped-stacked-bar.html
@@ -75,23 +75,27 @@
               {
                 name: 'Q1 Budget',
                 group: 'budget',
-                data: [44000, 55000, 41000, 67000, 22000]
+                color: '#80c7fd',
+                data: [44000, 55000, 41000, 67000, 22000],
               },
               {
                 name: 'Q1 Actual',
                 group: 'actual',
-                data: [48000, 50000, 40000, 65000, 25000]
+                color: '#008FFB',
+                data: [48000, 50000, 40000, 65000, 25000],
               },
               {
                 name: 'Q2 Budget',
                 group: 'budget',
-                data: [13000, 36000, 20000, 8000, 13000]
+                color: '#80f1cb',
+                data: [13000, 36000, 20000, 8000, 13000],
               },
               {
                 name: 'Q2 Actual',
                 group: 'actual',
-                data: [20000, 40000, 25000, 10000, 12000]
-              }
+                color: '#00E396',
+                data: [20000, 40000, 25000, 10000, 12000],
+              },
             ],
             options: {
               chart: {
@@ -130,10 +134,10 @@
               fill: {
                 opacity: 1,
               },
-              colors: ['#80c7fd', '#008FFB', '#80f1cb', '#00E396'],
               legend: {
                 position: 'top',
-                horizontalAlign: 'left'
+                clusterGroupedSeriesOrientation: "horizontal",
+                horizontalAlign: "left"
               }
             },
 

diff --git a/samples/react/column/grouped-stacked-column.html b/samples/react/column/grouped-stacked-column.html
@@ -75,23 +75,27 @@
               {
                 name: 'Q1 Budget',
                 group: 'budget',
-                data: [44000, 55000, 41000, 67000, 22000, 43000]
+                color: '#80c7fd',
+                data: [44000, 55000, 41000, 67000, 22000, 43000],
               },
               {
                 name: 'Q1 Actual',
                 group: 'actual',
-                data: [48000, 50000, 40000, 65000, 25000, 40000]
+                color: '#008FFB',
+                data: [48000, 50000, 40000, 65000, 25000, 40000],
               },
               {
                 name: 'Q2 Budget',
                 group: 'budget',
-                data: [13000, 36000, 20000, 8000, 13000, 27000]
+                color: '#80f1cb',
+                data: [13000, 36000, 20000, 8000, 13000, 27000],
               },
               {
                 name: 'Q2 Actual',
                 group: 'actual',
-                data: [20000, 40000, 25000, 10000, 12000, 28000]
-              }
+                color: '#00E396',
+                data: [20000, 40000, 25000, 10000, 12000, 28000],
+              },
             ],
             options: {
               chart: {
@@ -115,9 +119,9 @@
               },
               xaxis: {
                 categories: [
-                  'Online advertising',
+                  'Online ads',
                   'Sales Training',
-                  'Print advertising',
+                  'Print ads',
                   'Catalogs',
                   'Meetings',
                   'Public relations'
@@ -126,7 +130,6 @@
               fill: {
                 opacity: 1
               },
-              colors: ['#80c7fd', '#008FFB', '#80f1cb', '#00E396'],
               yaxis: {
                 labels: {
                   formatter: (val) => {
@@ -135,8 +138,8 @@
                 }
               },
               legend: {
-                position: 'top',
-                horizontalAlign: 'left'
+                position: 'bottom',
+                clusterGroupedSeriesOrientation: "vertical"
               }
             },
 

diff --git a/samples/source/bar/grouped-stacked-bar.xml b/samples/source/bar/grouped-stacked-bar.xml
@@ -38,10 +38,10 @@ xaxis: {
 fill: {
   opacity: 1,
 },
-colors: ['#80c7fd', '#008FFB', '#80f1cb', '#00E396'],
 legend: {
   position: 'top',
-  horizontalAlign: 'left'
+  clusterGroupedSeriesOrientation: "horizontal",
+  horizontalAlign: "left"
 }
 </options>
 
@@ -50,23 +50,27 @@ legend: {
   {
     name: 'Q1 Budget',
     group: 'budget',
-    data: [44000, 55000, 41000, 67000, 22000]
+    color: '#80c7fd',
+    data: [44000, 55000, 41000, 67000, 22000],
   },
   {
     name: 'Q1 Actual',
     group: 'actual',
-    data: [48000, 50000, 40000, 65000, 25000]
+    color: '#008FFB',
+    data: [48000, 50000, 40000, 65000, 25000],
   },
   {
     name: 'Q2 Budget',
     group: 'budget',
-    data: [13000, 36000, 20000, 8000, 13000]
+    color: '#80f1cb',
+    data: [13000, 36000, 20000, 8000, 13000],
   },
   {
     name: 'Q2 Actual',
     group: 'actual',
-    data: [20000, 40000, 25000, 10000, 12000]
-  }
+    color: '#00E396',
+    data: [20000, 40000, 25000, 10000, 12000],
+  },
 ]
 </series>
 </chart>
diff --git a/samples/source/column/grouped-stacked-column.xml b/samples/source/column/grouped-stacked-column.xml
@@ -23,9 +23,9 @@ plotOptions: {
 },
 xaxis: {
   categories: [
-    'Online advertising',
+    'Online ads',
     'Sales Training',
-    'Print advertising',
+    'Print ads',
     'Catalogs',
     'Meetings',
     'Public relations'
@@ -34,7 +34,6 @@ xaxis: {
 fill: {
   opacity: 1
 },
-colors: ['#80c7fd', '#008FFB', '#80f1cb', '#00E396'],
 yaxis: {
   labels: {
     formatter: (val) => {
@@ -43,8 +42,8 @@ yaxis: {
   }
 },
 legend: {
-  position: 'top',
-  horizontalAlign: 'left'
+  position: 'bottom',
+  clusterGroupedSeriesOrientation: "vertical"
 }
 </options>
 
@@ -53,23 +52,27 @@ legend: {
   {
     name: 'Q1 Budget',
     group: 'budget',
-    data: [44000, 55000, 41000, 67000, 22000, 43000]
+    color: '#80c7fd',
+    data: [44000, 55000, 41000, 67000, 22000, 43000],
   },
   {
     name: 'Q1 Actual',
     group: 'actual',
-    data: [48000, 50000, 40000, 65000, 25000, 40000]
+    color: '#008FFB',
+    data: [48000, 50000, 40000, 65000, 25000, 40000],
   },
   {
     name: 'Q2 Budget',
     group: 'budget',
-    data: [13000, 36000, 20000, 8000, 13000, 27000]
+    color: '#80f1cb',
+    data: [13000, 36000, 20000, 8000, 13000, 27000],
   },
   {
     name: 'Q2 Actual',
     group: 'actual',
-    data: [20000, 40000, 25000, 10000, 12000, 28000]
-  }
+    color: '#00E396',
+    data: [20000, 40000, 25000, 10000, 12000, 28000],
+  },
 ]
 </series>
 </chart>
diff --git a/samples/vanilla-js/bar/grouped-stacked-bar.html b/samples/vanilla-js/bar/grouped-stacked-bar.html
@@ -59,23 +59,27 @@
           {
             name: 'Q1 Budget',
             group: 'budget',
-            data: [44000, 55000, 41000, 67000, 22000]
+            color: '#80c7fd',
+            data: [44000, 55000, 41000, 67000, 22000],
           },
           {
             name: 'Q1 Actual',
             group: 'actual',
-            data: [48000, 50000, 40000, 65000, 25000]
+            color: '#008FFB',
+            data: [48000, 50000, 40000, 65000, 25000],
           },
           {
             name: 'Q2 Budget',
             group: 'budget',
-            data: [13000, 36000, 20000, 8000, 13000]
+            color: '#80f1cb',
+            data: [13000, 36000, 20000, 8000, 13000],
           },
           {
             name: 'Q2 Actual',
             group: 'actual',
-            data: [20000, 40000, 25000, 10000, 12000]
-          }
+            color: '#00E396',
+            data: [20000, 40000, 25000, 10000, 12000],
+          },
         ],
           chart: {
           type: 'bar',
@@ -113,10 +117,10 @@
         fill: {
           opacity: 1,
         },
-        colors: ['#80c7fd', '#008FFB', '#80f1cb', '#00E396'],
         legend: {
           position: 'top',
-          horizontalAlign: 'left'
+          clusterGroupedSeriesOrientation: "horizontal",
+          horizontalAlign: "left"
         }
         };
 

diff --git a/samples/vanilla-js/column/grouped-stacked-column.html b/samples/vanilla-js/column/grouped-stacked-column.html
@@ -59,23 +59,27 @@
           {
             name: 'Q1 Budget',
             group: 'budget',
-            data: [44000, 55000, 41000, 67000, 22000, 43000]
+            color: '#80c7fd',
+            data: [44000, 55000, 41000, 67000, 22000, 43000],
           },
           {
             name: 'Q1 Actual',
             group: 'actual',
-            data: [48000, 50000, 40000, 65000, 25000, 40000]
+            color: '#008FFB',
+            data: [48000, 50000, 40000, 65000, 25000, 40000],
           },
           {
             name: 'Q2 Budget',
             group: 'budget',
-            data: [13000, 36000, 20000, 8000, 13000, 27000]
+            color: '#80f1cb',
+            data: [13000, 36000, 20000, 8000, 13000, 27000],
           },
           {
             name: 'Q2 Actual',
             group: 'actual',
-            data: [20000, 40000, 25000, 10000, 12000, 28000]
-          }
+            color: '#00E396',
+            data: [20000, 40000, 25000, 10000, 12000, 28000],
+          },
         ],
           chart: {
           type: 'bar',
@@ -98,9 +102,9 @@
         },
         xaxis: {
           categories: [
-            'Online advertising',
+            'Online ads',
             'Sales Training',
-            'Print advertising',
+            'Print ads',
             'Catalogs',
             'Meetings',
             'Public relations'
@@ -109,7 +113,6 @@
         fill: {
           opacity: 1
         },
-        colors: ['#80c7fd', '#008FFB', '#80f1cb', '#00E396'],
         yaxis: {
           labels: {
             formatter: (val) => {
@@ -118,8 +121,8 @@
           }
         },
         legend: {
-          position: 'top',
-          horizontalAlign: 'left'
+          position: 'bottom',
+          clusterGroupedSeriesOrientation: "vertical"
         }
         };
 

diff --git a/samples/vue/bar/grouped-stacked-bar.html b/samples/vue/bar/grouped-stacked-bar.html
@@ -78,23 +78,27 @@
             {
               name: 'Q1 Budget',
               group: 'budget',
-              data: [44000, 55000, 41000, 67000, 22000]
+              color: '#80c7fd',
+              data: [44000, 55000, 41000, 67000, 22000],
             },
             {
               name: 'Q1 Actual',
               group: 'actual',
-              data: [48000, 50000, 40000, 65000, 25000]
+              color: '#008FFB',
+              data: [48000, 50000, 40000, 65000, 25000],
             },
             {
               name: 'Q2 Budget',
               group: 'budget',
-              data: [13000, 36000, 20000, 8000, 13000]
+              color: '#80f1cb',
+              data: [13000, 36000, 20000, 8000, 13000],
             },
             {
               name: 'Q2 Actual',
               group: 'actual',
-              data: [20000, 40000, 25000, 10000, 12000]
-            }
+              color: '#00E396',
+              data: [20000, 40000, 25000, 10000, 12000],
+            },
           ],
           chartOptions: {
             chart: {
@@ -133,10 +137,10 @@
             fill: {
               opacity: 1,
             },
-            colors: ['#80c7fd', '#008FFB', '#80f1cb', '#00E396'],
             legend: {
               position: 'top',
-              horizontalAlign: 'left'
+              clusterGroupedSeriesOrientation: "horizontal",
+              horizontalAlign: "left"
             }
           },