fixes #4713; pie donut unwanted space in bottom

apexcharts · Sep 24, 2024 · 6de93dd · 6de93dd
1 parent 44a21c5
commit 6de93dd
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 21 deletions.
diff --git a/samples/react/pie/semi-donut.html b/samples/react/pie/semi-donut.html
@@ -86,7 +86,7 @@
               },
               grid: {
                 padding: {
-                  bottom: -80
+                  bottom: -100
                 }
               },
               responsive: [{

diff --git a/samples/source/pie/semi-donut.xml b/samples/source/pie/semi-donut.xml
@@ -22,7 +22,7 @@ plotOptions: {
 },
 grid: {
   padding: {
-    bottom: -80
+    bottom: -100
   }
 },
 responsive: [{

diff --git a/samples/vanilla-js/pie/semi-donut.html b/samples/vanilla-js/pie/semi-donut.html
@@ -69,7 +69,7 @@
         },
         grid: {
           padding: {
-            bottom: -80
+            bottom: -100
           }
         },
         responsive: [{

diff --git a/samples/vue/pie/semi-donut.html b/samples/vue/pie/semi-donut.html
@@ -89,7 +89,7 @@
             },
             grid: {
               padding: {
-                bottom: -80
+                bottom: -100
               }
             },
             responsive: [{

diff --git a/src/charts/Radar.js b/src/charts/Radar.js
@@ -36,7 +36,7 @@ class Radar {
 
     this.defaultSize =
       w.globals.svgHeight < w.globals.svgWidth
-        ? w.globals.gridHeight + w.globals.goldenPadding * 1.5
+        ? w.globals.gridHeight
         : w.globals.gridWidth
 
     this.isLog = w.config.yaxis[0].logarithmic
@@ -401,10 +401,10 @@ class Radar {
           i,
           j: i,
           parent: elXAxisWrap,
-          className: "apexcharts-xaxis-label",
+          className: 'apexcharts-xaxis-label',
           color:
             Array.isArray(xaxisLabelsConfig.style.colors) &&
-              xaxisLabelsConfig.style.colors[i]
+            xaxisLabelsConfig.style.colors[i]
               ? xaxisLabelsConfig.style.colors[i]
               : '#a8a8a8',
           dataLabelsConfig: {
@@ -424,7 +424,6 @@ class Radar {
             w.config.chart.events.xAxisLabelClick(e, this.ctx, opts)
           }
         })
-
       }
     })
 

diff --git a/src/modules/Core.js b/src/modules/Core.js
@@ -446,7 +446,7 @@ export default class Core {
       !w.config.legend.floating
     ) {
       legendHeight =
-        new Legend(this.ctx).legendHelpers.getLegendDimensions().clwh + 10
+        new Legend(this.ctx).legendHelpers.getLegendDimensions().clwh + 7
     }
 
     const el = w.globals.dom.baseEl.querySelector(
@@ -465,7 +465,9 @@ export default class Core {
       chartInnerDimensions = Math.max(w.globals.radialSize * 2.05, maxHeight)
     }
 
-    const newHeight = chartInnerDimensions + gl.translateY + legendHeight + offY
+    const newHeight = Math.ceil(
+      chartInnerDimensions + gl.translateY + legendHeight + offY
+    )
 
     if (gl.dom.elLegendForeign) {
       gl.dom.elLegendForeign.setAttribute('height', newHeight)

diff --git a/src/modules/dimensions/Dimensions.js b/src/modules/dimensions/Dimensions.js
@@ -156,7 +156,7 @@ export default class Dimensions {
 
     if (w.config.chart.type === 'radar' || this.isSparkline) {
       yAxisWidth = 0
-      xAxisHeight = gl.goldenPadding
+      xAxisHeight = 0
     }
 
     if (this.isSparkline) {
@@ -256,30 +256,25 @@ export default class Dimensions {
     let offX = cnf.plotOptions[type].offsetX
 
     if (!cnf.legend.show || cnf.legend.floating) {
-      gl.gridHeight =
-        gl.svgHeight - cnf.grid.padding.top - cnf.grid.padding.bottom
+      gl.gridHeight = gl.svgHeight
 
       const maxWidth = gl.dom.elWrap.getBoundingClientRect().width
-      gl.gridWidth =
-        Math.min(maxWidth, gl.gridHeight) -
-        cnf.grid.padding.left -
-        cnf.grid.padding.right
+      gl.gridWidth = Math.min(maxWidth, gl.gridHeight)
 
       gl.translateY = offY
       gl.translateX = offX + (gl.svgWidth - gl.gridWidth) / 2
-
       return
     }
 
     switch (cnf.legend.position) {
       case 'bottom':
-        gl.gridHeight = gl.svgHeight - this.lgRect.height - gl.goldenPadding
+        gl.gridHeight = gl.svgHeight - this.lgRect.height
         gl.gridWidth = gl.svgWidth
         gl.translateY = offY - 10
         gl.translateX = offX + (gl.svgWidth - gl.gridWidth) / 2
         break
       case 'top':
-        gl.gridHeight = gl.svgHeight - this.lgRect.height - gl.goldenPadding
+        gl.gridHeight = gl.svgHeight - this.lgRect.height
         gl.gridWidth = gl.svgWidth
         gl.translateY = this.lgRect.height + offY + 10
         gl.translateX = offX + (gl.svgWidth - gl.gridWidth) / 2

diff --git a/src/modules/settings/Defaults.js b/src/modules/settings/Defaults.js
@@ -978,6 +978,14 @@ export default class Defaults {
       legend: {
         position: 'right',
       },
+      grid: {
+        padding: {
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+        },
+      },
     }
   }
 
@@ -1022,6 +1030,14 @@ export default class Defaults {
       legend: {
         position: 'right',
       },
+      grid: {
+        padding: {
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+        },
+      },
     }
   }
 
@@ -1052,6 +1068,14 @@ export default class Defaults {
       legend: {
         position: 'right',
       },
+      grid: {
+        padding: {
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+        },
+      },
     }
   }
 
@@ -1085,6 +1109,12 @@ export default class Defaults {
       },
       grid: {
         show: false,
+        padding: {
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+        },
       },
       xaxis: {
         labels: {
@@ -1136,6 +1166,14 @@ export default class Defaults {
         enabled: false,
         fillSeriesColor: true,
       },
+      grid: {
+        padding: {
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+        },
+      },
     }
   }
 

diff --git a/src/modules/settings/Globals.js b/src/modules/settings/Globals.js
@@ -137,7 +137,6 @@ export default class Globals {
       capturedSeriesIndex: -1,
       capturedDataPointIndex: -1,
       selectedDataPoints: [],
-      goldenPadding: 35, // this value is used at a lot of places for spacing purpose
       invalidLogScale: false, // if a user enabled log scale but the data provided is not valid to generate a log scale, turn on this flag
       ignoreYAxisIndexes: [], // when series are being collapsed in multiple y axes, ignore certain index
       maxValsInArrayIndex: 0,