Merge pull request #4747 from apexcharts/feat/bar-border-radius

improve border radius implementation in stacked bar charts
apexcharts · Oct 5, 2024 · 0ddd2d7 · 0ddd2d7
2 parents b06abe8 + 15afc7b
commit 0ddd2d7
Show file tree

Hide file tree

Showing 7 changed files with 299 additions and 68 deletions.
diff --git a/samples/vanilla-js/column/border-radius-test.html b/samples/vanilla-js/column/border-radius-test.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Border Radius Test - Stacked Column</title>
+
+    <link href="../../assets/styles.css" rel="stylesheet" />
+
+    <style>
+      #chart {
+        max-width: 650px;
+        margin: 35px auto;
+      }
+    </style>
+
+    <script>
+      window.Promise ||
+        document.write(
+          '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
+        )
+      window.Promise ||
+        document.write(
+          '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
+        )
+      window.Promise ||
+        document.write(
+          '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
+        )
+    </script>
+
+    <script src="../../../dist/apexcharts.js"></script>
+
+    <script>
+      // Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
+      // Based on https://gist.github.com/blixt/f17b47c62508be59987b
+      var _seed = 42
+      Math.random = function () {
+        _seed = (_seed * 16807) % 2147483647
+        return (_seed - 1) / 2147483646
+      }
+    </script>
+  </head>
+
+  <body>
+    <div id="chart"></div>
+
+    <script>
+      var options = {
+        series: [
+          {
+            name: 'PRODUCT A',
+            data: [0, 0, 41, 67, 22, 0],
+          },
+          {
+            name: 'PRODUCT B',
+            data: [20, 0, -20, 0, 13, 0],
+          },
+          {
+            name: 'PRODUCT C',
+            data: [20, 17, -15, 0, 21, 14],
+          },
+          {
+            name: 'PRODUCT D',
+            data: [30, 7, 25, 13, 10, 8],
+          },
+        ],
+        chart: {
+          type: 'bar',
+          height: 450,
+          stacked: true,
+          toolbar: {
+            show: true,
+          },
+        },
+        responsive: [
+          {
+            breakpoint: 480,
+            options: {
+              legend: {
+                position: 'bottom',
+                offsetX: -10,
+                offsetY: 0,
+              },
+            },
+          },
+        ],
+        stroke: {
+          width: 0,
+          colors: ['#fff'],
+        },
+        plotOptions: {
+          bar: {
+            horizontal: false,
+            borderRadius: 10,
+            borderRadiusApplication: 'end', // 'around', 'end'
+            borderRadiusWhenStacked: 'last', // 'all', 'last'
+            dataLabels: {
+              total: {
+                enabled: true,
+                style: {
+                  fontSize: '13px',
+                  fontWeight: 900,
+                },
+              },
+            },
+          },
+        },
+        xaxis: {
+          stepSize: 11,
+          categories: [
+            '01/01/2011',
+            '01/02/2011',
+            '01/03/2011',
+            '01/04/2011',
+            '01/05/2011',
+            '01/06/2011',
+          ],
+        },
+        yaxis: {
+          stepSize: 11,
+        },
+        legend: {
+          position: 'right',
+          offsetY: 40,
+        },
+        fill: {
+          opacity: 1,
+        },
+        grid: {
+          xaxis: {
+            lines: {
+              show: true,
+            },
+          },
+          yaxis: {
+            lines: {
+              show: true,
+            },
+          },
+        },
+      }
+
+      var chart = new ApexCharts(document.querySelector('#chart'), options)
+      chart.render()
+    </script>
+  </body>
+</html>
diff --git a/src/assets/apexcharts.css b/src/assets/apexcharts.css
@@ -681,3 +681,14 @@ rect.legend-mouseover-inactive,
 .apexcharts-rangebar-goals-markers {
   pointer-events: none
 }
+
+.apexcharts-flip-y {
+  transform: scaleY(-1) translateY(-100%);
+  transform-origin: top;
+  transform-box: fill-box;
+}
+.apexcharts-flip-x {
+  transform: scaleX(-1);
+  transform-origin: center;
+  transform-box: fill-box;
+}
diff --git a/src/charts/Bar.js b/src/charts/Bar.js
@@ -318,6 +318,7 @@ class Bar {
     elBarShadows,
     visibleSeries,
     type,
+    classes,
   }) {
     const w = this.w
     const graphics = new Graphics(this.ctx)
@@ -379,7 +380,7 @@ class Bar {
       animationDelay: delay,
       initialSpeed: w.config.chart.animations.speed,
       dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
-      className: `apexcharts-${type}-area`,
+      className: `apexcharts-${type}-area ${classes}`,
       chartType: type,
     })
 

diff --git a/src/charts/BarStacked.js b/src/charts/BarStacked.js
@@ -119,10 +119,8 @@ class BarStacked extends Bar {
       }
 
       for (let j = 0; j < w.globals.dataPoints; j++) {
-        const strokeWidth = this.barHelpers.getStrokeWidth(i, j, realIndex)
         const commonPathOpts = {
           indexes: { i, j, realIndex, translationsIndex, bc },
-          strokeWidth,
           x,
           y,
           elSeries,
@@ -169,6 +167,23 @@ class BarStacked extends Bar {
 
         let pathFill = this.barHelpers.getPathFillColor(series, i, j, realIndex)
 
+        let classes = ''
+
+        if (w.globals.isBarHorizontal) {
+          if (
+            this.barHelpers.arrBorderRadius[realIndex][j] === 'bottom' &&
+            w.globals.series[realIndex][j] > 0
+          ) {
+            classes = 'apexcharts-flip-x'
+          }
+        } else {
+          if (
+            this.barHelpers.arrBorderRadius[realIndex][j] === 'bottom' &&
+            w.globals.series[realIndex][j] > 0
+          ) {
+            classes = 'apexcharts-flip-y'
+          }
+        }
         elSeries = this.renderSeries({
           realIndex,
           pathFill,
@@ -177,7 +192,7 @@ class BarStacked extends Bar {
           columnGroupIndex,
           pathFrom: paths.pathFrom,
           pathTo: paths.pathTo,
-          strokeWidth,
+          strokeWidth: this.barHelpers.getStrokeWidth(i, j, realIndex),
           elSeries,
           x,
           y,
@@ -188,6 +203,7 @@ class BarStacked extends Bar {
           elGoalsMarkers,
           type: 'bar',
           visibleSeries: columnGroupIndex,
+          classes,
         })
       }
 
@@ -291,7 +307,6 @@ class BarStacked extends Bar {
   drawStackedBarPaths({
     indexes,
     barHeight,
-    strokeWidth,
     zeroW,
     x,
     y,
@@ -355,7 +370,6 @@ class BarStacked extends Bar {
       barHeight,
       x1: barXPosition,
       x2: x,
-      strokeWidth,
       series: this.series,
       realIndex: indexes.realIndex,
       seriesGroup,
@@ -518,7 +532,6 @@ class BarStacked extends Bar {
       y1: barYPosition,
       y2: y,
       yRatio: this.yRatio[translationsIndex],
-      strokeWidth: this.strokeWidth,
       series: this.series,
       seriesGroup,
       realIndex: indexes.realIndex,

diff --git a/src/charts/Line.js b/src/charts/Line.js
@@ -953,8 +953,8 @@ class Line {
 
               // Check for single isolated point
               if (series[i][j + 1] === null) {
-                linePaths.push(linePath);
-                areaPaths.push(areaPath);
+                linePaths.push(linePath)
+                areaPaths.push(areaPath)
                 // Stay in pathState = 0;
                 break
               }
@@ -1042,8 +1042,8 @@ class Line {
 
               // Check for single isolated point
               if (series[i][j + 1] === null) {
-                linePaths.push(linePath);
-                areaPaths.push(areaPath);
+                linePaths.push(linePath)
+                areaPaths.push(areaPath)
                 // Stay in pathState = 0
                 break
               }