(fix): Do not regenerate mask ID on each update for percent gauge cha…

…rt (#2022) * (fix): Do not regenerate mask ID on each update for percent gauge chart * Bump version
swimlane · Jan 24, 2025 · 9f94397 · 9f94397
1 parent 47a4f57
commit 9f94397
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 21.1.3
+
+- Fix: Fixed a bug where the mask ID for percent gauge chart would be regenerated on each update
+
 ## 21.1.2
 
 - Fix: Percent Gauge Chart: Ensures the circle mask ID is unique for each chart

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.2",
+  "version": "21.1.3",
   "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
@@ -126,7 +126,7 @@ export class PercentGaugeComponent extends BaseChartComponent {
   targetRadius: number;
   targetTextTransform: string;
 
-  circleMaskId: string;
+  circleMaskId = `circleMask${id()}`;
   circleTransform: string;
   ticks: any[] = [];
   ticHeight: number;
@@ -144,8 +144,6 @@ export class PercentGaugeComponent extends BaseChartComponent {
   update(): void {
     super.update();
 
-    this.circleMaskId = `circleMask${id()}`;
-
     this.margin = [...this.defaultMargin];
     if (this.showLabel) {
       this.margin[2] = 50;