@porscheinformatik/clr-addons 19.18.2 → 19.18.3

package/fesm2022/porscheinformatik-clr-addons-charts.mjs

@@ -1478,6 +1478,7 @@ class ComboChartComponent extends ChartBase {
             const lineItems = this.lineSeries().map(s => ({ label: s.label, color: s.color }));
             return [...barItems, ...lineItems];
         });
+        this._clipIdCounter = 0;
     }
     // ── Lifecycle ────────────────────────────────────────────────────────────────
     ngOnChanges(_changes) {
@@ -1535,6 +1536,19 @@ class ComboChartComponent extends ChartBase {
             .domain([0, maxLine || 1])
             .nice(this.yLineMax() === undefined ? undefined : 0)
             .range([height, 0]);
+        // ── SVG ClipPath ─────────────────────────────────────────────────────────
+        // Ensures bars/lines that exceed the Y-axis maximum (yBarMax/yLineMax) are
+        // visually clipped at the chart boundary without modifying the data values.
+        const clipId = `combo-clip-${this._clipIdCounter++}`;
+        this.svg
+            .append('defs')
+            .append('clipPath')
+            .attr('id', clipId)
+            .append('rect')
+            .attr('x', 0)
+            .attr('y', 0)
+            .attr('width', width)
+            .attr('height', height);
         const g = this.svg
             .attr('width', width)
             .attr('height', height)
@@ -1577,8 +1591,11 @@ class ComboChartComponent extends ChartBase {
                     .text(this.yLineAxisLabel());
             }
         }
-        this.drawBars(g, x, yBar);
-        this.drawLines(g, x, yLine);
+        // Wrap chart content in a clipped group so elements exceeding the Y max
+        // are not visible beyond the chart boundary.
+        const contentGroup = g.append('g').attr('clip-path', `url(#${clipId})`);
+        this.drawBars(contentGroup, x, yBar);
+        this.drawLines(contentGroup, x, yLine);
     }
     drawBars(g, x, y) {
         // Running stack base (cumulative sum) per X key across all bar series