From 47a4f57edcf5bfacee4c5d5b1280fe9cb9b79055 Mon Sep 17 00:00:00 2001
From: Marjan Georgiev <marjan.georgiev@gmail.com>
Date: Fri, 24 Jan 2025 21:14:20 +0100
Subject: [PATCH] Use a unique mask ID for each percent gauge chart (#1983)

* Use a unique mask ID for each percent gauge chart

* (release): 21.1.2
---
 docs/changelog.md                                         | 4 ++++
 projects/swimlane/ngx-charts/package.json                 | 2 +-
 .../lib/gauge/percent-gauge/percent-gauge.component.ts    | 8 ++++++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/docs/changelog.md b/docs/changelog.md
index c02b6cb61..824c6fa62 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 21.1.2
+
+- Fix: Percent Gauge Chart: Ensures the circle mask ID is unique for each chart
+
 ## 21.1.1
 
 - Fix: Percent Gauge Chart: Fixes server-side-rendering
diff --git a/projects/swimlane/ngx-charts/package.json b/projects/swimlane/ngx-charts/package.json
index 059783796..5a1e0f1f0 100644
--- a/projects/swimlane/ngx-charts/package.json
+++ b/projects/swimlane/ngx-charts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swimlane/ngx-charts",
-  "version": "21.1.1",
+  "version": "21.1.2",
   "description": "Declarative Charting Framework for Angular",
   "repository": {
     "type": "git",
diff --git a/projects/swimlane/ngx-charts/src/lib/gauge/percent-gauge/percent-gauge.component.ts b/projects/swimlane/ngx-charts/src/lib/gauge/percent-gauge/percent-gauge.component.ts
index 238eceda8..84705f6ae 100644
--- a/projects/swimlane/ngx-charts/src/lib/gauge/percent-gauge/percent-gauge.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/gauge/percent-gauge/percent-gauge.component.ts
@@ -5,6 +5,7 @@ import { calculateViewDimensions } from '../../common/view-dimensions.helper';
 import { ColorHelper } from '../../common/color.helper';
 import { ViewDimensions } from '../../common/types/view-dimension.interface';
 import { ScaleType } from '../../common/types/scale-type.enum';
+import { id } from '../../utils/id';
 
 @Component({
   selector: 'ngx-charts-percent-gauge',
@@ -12,7 +13,7 @@ import { ScaleType } from '../../common/types/scale-type.enum';
     <ngx-charts-chart [view]="[width, height]" [showLegend]="false" [animations]="animations">
       <svg:g class="percent-gauge chart" (click)="onClick()">
         <svg:g [attr.transform]="transform">
-          <mask id="circleMask">
+          <mask [attr.id]="circleMaskId">
             <circle
               [attr.r]="radius"
               [style.stroke-width]="radius / 5"
@@ -38,7 +39,7 @@ import { ScaleType } from '../../common/types/scale-type.enum';
             [style.stroke-dasharray]="dashes"
           />
 
-          <svg:g mask="url(#circleMask)">
+          <svg:g [attr.mask]="'url(#' + circleMaskId + ')'">
             <svg:g [attr.transform]="circleTransform">
               <svg:g *ngFor="let tic of ticks" [attr.transform]="tic.transform">
                 <rect
@@ -125,6 +126,7 @@ export class PercentGaugeComponent extends BaseChartComponent {
   targetRadius: number;
   targetTextTransform: string;
 
+  circleMaskId: string;
   circleTransform: string;
   ticks: any[] = [];
   ticHeight: number;
@@ -142,6 +144,8 @@ export class PercentGaugeComponent extends BaseChartComponent {
   update(): void {
     super.update();
 
+    this.circleMaskId = `circleMask${id()}`;
+
     this.margin = [...this.defaultMargin];
     if (this.showLabel) {
       this.margin[2] = 50;