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
swimlane · Jan 24, 2025 · 47a4f57 · 47a4f57
1 parent 3688955
commit 47a4f57
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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
@@ -5,14 +5,15 @@ 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',
   template: `
     <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;