Merge branch 'main' of https://github.com/apexcharts/apexcharts.js

Author: junedchhipa

src/modules/DataLabels.js

@@ -272,11 +272,15 @@ class DataLabels {
 
     if (correctedLabels.textRects) {
       // fixes #2264
+      const barPad = w.globals.barPadForNumericAxis || 0
       if (
-        x < -20 - /** @type {any} */ (correctedLabels.textRects).width ||
+        x <
+          -(barPad + 20) -
+            /** @type {any} */ (correctedLabels.textRects).width ||
         x >
           w.layout.gridWidth +
             /** @type {any} */ (correctedLabels.textRects).width +
+            barPad +
             30
       ) {
         // datalabels fall outside drawing area, so draw a blank label

tests/unit/bar-chart.spec.js

@@ -606,6 +606,46 @@ describe('Bar chart', () => {
       const datalabels = el.querySelectorAll('.apexcharts-datalabels')
       expect(datalabels.length).toBeGreaterThan(0)
     })
+
+    it('should not blank first/last bar data labels in mixed charts (bar + line)', () => {
+      const chart = createChartWithOptions({
+        chart: { type: 'line', height: 380 },
+        series: [
+          { name: 'Incidents', type: 'bar', data: [1, 9, 2, 1, 0, 1] },
+          { name: 'Invites', type: 'bar', data: [2, 16, 2, 1, 3, 1] },
+          { name: 'Accepted', type: 'bar', data: [2, 8, 2, 1, 1, 1] },
+          { name: '% Accepted', type: 'line', data: [100, 50, 100, 100, 0, 100] },
+        ],
+        dataLabels: { enabled: true },
+        stroke: { width: [0, 0, 0, 3] },
+        xaxis: {
+          categories: ['Mar-2021', 'Aug-2021', 'Sep-2021', 'Nov-2021', 'Jan-2022', 'Jan-2023'],
+        },
+        yaxis: [
+          { seriesName: 'Incidents', min: 0, max: 20 },
+          { seriesName: 'Invites', show: false, min: 0, max: 20 },
+          { seriesName: 'Accepted', show: false, min: 0, max: 20 },
+          { seriesName: '% Accepted', opposite: true, min: 0, max: 120 },
+        ],
+        plotOptions: { bar: { columnWidth: '70%' } },
+      })
+
+      const el = chart.el
+      const datalabelTexts = el.querySelectorAll(
+        '.apexcharts-datalabels .apexcharts-datalabel'
+      )
+      const labels = Array.from(datalabelTexts).map((t) =>
+        t.textContent.trim()
+      )
+
+      const barLabels = labels.filter((l) => l !== '')
+      const firstCategoryLabels = labels.slice(0, 4).filter((l) => l !== '')
+      const lastCategoryLabels = labels.slice(-4).filter((l) => l !== '')
+
+      expect(barLabels.length).toBeGreaterThan(0)
+      expect(firstCategoryLabels.length).toBeGreaterThan(0)
+      expect(lastCategoryLabels.length).toBeGreaterThan(0)
+    })
   })
 
   // =========================================================================

yarn.lock

@@ -3666,9 +3666,9 @@ flat-cache@^4.0.0:
     keyv "^4.5.4"
 
 flatted@^3.2.9:
-  version "3.3.3"
-  resolved "https://registry.npmmirror.com/flatted/-/flatted-3.3.3.tgz"
-  integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.4.2.tgz#f5c23c107f0f37de8dbdf24f13722b3b98d52726"
+  integrity sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==
 
 follow-redirects@^1.15.11:
   version "1.15.11"
@@ -5057,9 +5057,9 @@ lodash.merge@^4.6.2:
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
 lodash@^4.17.21:
-  version "4.17.23"
-  resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.23.tgz"
-  integrity sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==
+  version "4.18.1"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.18.1.tgz#ff2b66c1f6326d59513de2407bf881439812771c"
+  integrity sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==
 
 loglevel@^1.9.2:
   version "1.9.2"