From 3a81ada8773a828e626893ce54c716f6abd6fc65 Mon Sep 17 00:00:00 2001
From: Lyq322 <candyliuyq@gmail.com>
Date: Sun, 22 Oct 2023 13:29:47 -0500
Subject: [PATCH 01/10] Create custom colors for linear scaled charts

Includes all bar charts, line chart, all area charts, bubble chart, heat map and calendar and box chart.
---
 .../ngx-charts/src/lib/common/color.helper.ts | 21 +++++-
 .../src/lib/heat-map/heat-map.component.ts    |  3 +-
 src/app/app.component.html                    | 43 +++++++++++-
 src/app/app.component.ts                      | 30 +++++++-
 src/app/chartTypes.ts                         | 69 ++++++++++++-------
 src/app/data.ts                               | 24 +++----
 6 files changed, 147 insertions(+), 43 deletions(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts b/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
index f1aec711f..86b0ff2c8 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
@@ -27,10 +27,18 @@ export class ColorHelper {
         return cs.name === scheme;
       });
     }
-    this.colorDomain = scheme.domain;
+    
+    this.customColors = customColors;
+
+    if (this.customColors) {
+      this.colorDomain = this.customColors;
+    }
+    else {
+      this.colorDomain = scheme.domain;
+    }
+
     this.scaleType = type;
     this.domain = domain;
-    this.customColors = customColors;
 
     this.scale = this.generateColorScheme(scheme, type, this.domain);
   }
@@ -56,7 +64,13 @@ export class ColorHelper {
         break;
       case ScaleType.Linear:
         {
-          const colorDomain = [...scheme.domain];
+          let colorDomain;
+          if (this.customColors) {
+            colorDomain = [...this.customColors];
+          } 
+          else {
+            colorDomain = [...scheme.domain];
+          }
           if (colorDomain.length === 1) {
             colorDomain.push(colorDomain[0]);
             this.colorDomain = colorDomain;
@@ -114,6 +128,7 @@ export class ColorHelper {
       .domain(this.domain as number[])
       .range([0, 1]);
 
+    console.log(this.colorDomain);
     const colorValueScale = scaleBand().domain(this.colorDomain).range([0, 1]);
 
     const endColor = this.getColor(value);
diff --git a/projects/swimlane/ngx-charts/src/lib/heat-map/heat-map.component.ts b/projects/swimlane/ngx-charts/src/lib/heat-map/heat-map.component.ts
index 31bdc7a61..90e33f218 100644
--- a/projects/swimlane/ngx-charts/src/lib/heat-map/heat-map.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/heat-map/heat-map.component.ts
@@ -300,7 +300,8 @@ export class HeatMapComponent extends BaseChartComponent {
   }
 
   setColors(): void {
-    this.colors = new ColorHelper(this.scheme, this.scaleType, this.valueDomain);
+    console.log("heat", this.customColors);
+    this.colors = new ColorHelper(this.scheme, this.scaleType, this.valueDomain, this.customColors);
   }
 
   getLegendOptions(): LegendOptions {
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6dd4b53cc..95bc09f94 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -45,6 +45,7 @@
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
+        [customColors]="customColors"
         [results]="single"
         [animations]="animations"
         [gradient]="gradient"
@@ -82,6 +83,7 @@
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
+        [customColors]="customColors"
         [results]="multi"
         [animations]="animations"
         [gradient]="gradient"
@@ -120,6 +122,7 @@
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
+        [customColors]="customColors"
         [results]="multi"
         [animations]="animations"
         [gradient]="gradient"
@@ -158,6 +161,7 @@
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
+        [customColors]="customColors"
         [results]="multi"
         [animations]="animations"
         [gradient]="gradient"
@@ -194,6 +198,7 @@
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
+        [customColors]="customColors"
         [results]="multi"
         [animations]="animations"
         [gradient]="gradient"
@@ -230,6 +235,7 @@
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
+        [customColors]="customColors"
         [results]="multi"
         [animations]="animations"
         [gradient]="gradient"
@@ -264,6 +270,7 @@
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
+        [customColors]="customColors"
         [results]="multi"
         [animations]="animations"
         [gradient]="gradient"
@@ -297,6 +304,7 @@
         class="chart-container"
         [view]="view"
         [scheme]="colorScheme"
+        [customColors]="customColorsNonlinear"
         [results]="single"
         [animations]="animations"
         [legend]="showLegend"
@@ -320,6 +328,7 @@
         class="chart-container"
         [view]="view"
         [scheme]="colorScheme"
+        [customColors]="customColorsNonlinear"
         [results]="single"
         [valueFormatting]="valueFormatting"
         [animations]="animations"
@@ -336,6 +345,7 @@
         class="chart-container"
         [view]="view"
         [scheme]="colorScheme"
+        [customColors]="customColorsNonlinear"
         [results]="single"
         [animations]="animations"
         [tooltipDisabled]="tooltipDisabled"
@@ -351,6 +361,7 @@
         class="chart-container"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
+        [customColors]="customColors"
         [results]="dateDataWithOrWithoutRange"
         [animations]="animations"
         [legend]="showLegend"
@@ -391,6 +402,7 @@
         class="chart-container"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
+        [customColors]="customColors"
         [results]="multi"
         [animations]="animations"
         [legend]="showLegend"
@@ -440,6 +452,7 @@
         [yScaleMax]="yScaleMax"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
+        [customColors]="customColors"
         [roundDomains]="roundDomains"
         [tooltipDisabled]="tooltipDisabled"
         [minRadius]="minRadius"
@@ -461,6 +474,7 @@
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
+        [customColors]="customColors"
         [results]="dateData"
         [animations]="animations"
         [legend]="showLegend"
@@ -500,6 +514,7 @@
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
+        [customColors]="customColors"
         [results]="dateData"
         [animations]="animations"
         [legend]="showLegend"
@@ -538,6 +553,7 @@
         [view]="view"
         [scheme]="colorScheme"
         [schemeType]="schemeType"
+        [customColors]="customColors"
         [results]="dateData"
         [animations]="animations"
         [legend]="showLegend"
@@ -597,6 +613,7 @@
         (select)="onSelect($event)"
       >
       </combo-chart-component>
+      <!--combo chart??-->
       <ngx-charts-heat-map
         *ngIf="chartType === 'heat-map'"
         class="chart-container"
@@ -622,6 +639,7 @@
         [maxXAxisTickLength]="maxXAxisTickLength"
         [maxYAxisTickLength]="maxYAxisTickLength"
         [wrapTicks]="wrapTicks"
+        [customColors]="customColorsLinear"
         (select)="select($event)"
         (activate)="activate($event)"
         (deactivate)="deactivate($event)"
@@ -650,6 +668,7 @@
         [maxXAxisTickLength]="maxXAxisTickLength"
         [maxYAxisTickLength]="maxYAxisTickLength"
         [wrapTicks]="wrapTicks"
+        [customColors]="customColorsLinear"
         (select)="select($event)"
         (activate)="activate($event)"
         (deactivate)="deactivate($event)"
@@ -666,6 +685,7 @@
         [labelFormatting]="gdpLabelFormatting"
         [valueFormatting]="currencyFormatting"
         [gradient]="gradient"
+        [customColors]="customColorsNonlinear"
         (select)="select($event)"
       >
       </ngx-charts-tree-map>
@@ -678,6 +698,7 @@
         emptyColor="#1e222e"
         [results]="single"
         [animations]="animations"
+        [customColors]="customColorsNonlinear"
         (select)="select($event)"
       >
       </ngx-charts-number-card>
@@ -738,6 +759,7 @@
           class="chart-container"
           [view]="view"
           [scheme]="colorScheme"
+          [customColors]="customColorsNonlinear"
           cardColor="#232837"
           emptyColor="#1e222e"
           [results]="statusData"
@@ -769,6 +791,7 @@
         [margin]="margin ? [marginTop, marginRight, marginBottom, marginLeft] : null"
         [tooltipDisabled]="tooltipDisabled"
         [showText]="showText"
+        [customColors]="customColorsNonlinear"
         (select)="select($event)"
         (activate)="activate($event)"
         (deactivate)="deactivate($event)"
@@ -785,6 +808,7 @@
         [value]="gaugeValue"
         [previousValue]="gaugePreviousValue"
         [units]="gaugeUnits"
+        [customColors]="customColorsNonlinear"
         (select)="select($event)"
       >
       </ngx-charts-linear-gauge>
@@ -802,6 +826,7 @@
           class="chart-container"
           [scheme]="colorScheme"
           [schemeType]="schemeType"
+          [customColors]="customColors"
           [results]="plotData"
           [animations]="animations"
           [legend]="false"
@@ -835,6 +860,7 @@
           class="chart-container"
           [scheme]="colorScheme"
           [schemeType]="schemeType"
+          [customColors]="customColors"
           [results]="plotData"
           [animations]="animations"
           [legend]="false"
@@ -886,6 +912,7 @@ <h4 style="text-align: center">
           [animations]="animations"
           [tooltipDisabled]="tooltipDisabled"
           [gradient]="gradient"
+          [customColors]="customColorsNonlinear"
           (select)="treemapSelect($event)"
         >
         </ngx-charts-tree-map>
@@ -922,6 +949,7 @@ <h4 style="text-align: center">
           [autoScale]="autoScale"
           [scheme]="colorScheme"
           [schemeType]="schemeType"
+          [customColors]="customColors"
           [roundDomains]="roundDomains"
           [tooltipDisabled]="tooltipDisabled"
           [minRadius]="minRadius"
@@ -1194,7 +1222,7 @@ <h3 (click)="colorVisible = !colorVisible" style="cursor: pointer">
         [hidden]="!colorVisible"
         style="margin-left: 10px"
         [ngModel]="schemeType"
-        (ngModelChange)="schemeType = $event"
+        (ngModelChange)="setSchemeType($event)"
       >
         <option value="ordinal">Ordinal</option>
         <option value="linear">Linear</option>
@@ -1219,6 +1247,19 @@ <h3 (click)="optsVisible = !optsVisible" style="cursor: pointer">
           </label>
           <br />
         </div>
+        <div *ngIf="chart.options.includes('customColors') && (isLinear || chartType === 'heat-map' || chartType === 'calendar')">
+          <label>
+            <input type="checkbox" [(ngModel)]="useCustomColors" />
+            Custom Colors
+          </label>
+          <br />
+        </div>
+        <div *ngIf="useCustomColors">
+          <label>Gradient Color 1:</label><input type="text" [(ngModel)]="customColorsLinear[0]" />
+        </div>
+        <div *ngIf="useCustomColors">
+          <label>Gradient Color 2:</label><input type="text" [(ngModel)]="customColorsLinear[1]" />
+        </div>
         <div *ngIf="chart.options.includes('showXAxis')">
           <label>
             <input type="checkbox" [(ngModel)]="showXAxis" />
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 9e4084f74..3216a5735 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -165,12 +165,22 @@ export class AppComponent implements OnInit {
   rangeFillOpacity: number = 0.15;
 
   // Override colors for certain values
-  customColors: any[] = [
+  customColors: any[];
+
+  customColorsNonlinear: any[] = [
     {
       name: 'Germany',
-      value: '#a8385d'
+      value: '#000000'
     }
   ];
+  
+  customColorsLinear: any[] = [
+    '#0000ff',
+    '#ffffff'
+  ];
+
+  useCustomColors: boolean = false;
+  isLinear: boolean = false;
 
   // pie
   showLabels = true;
@@ -207,7 +217,7 @@ export class AppComponent implements OnInit {
 
   // heatmap
   heatmapMin: number = 0;
-  heatmapMax: number = 50000;
+  heatmapMax: number = 15;
 
   // Combo Chart
   barChart: any[] = barChart;
@@ -266,6 +276,7 @@ export class AppComponent implements OnInit {
   optsVisible: boolean = true;
 
   constructor(public location: Location) {
+    console.log("constructor")
     this.mathFunction = this.getFunction();
 
     Object.assign(this, {
@@ -291,6 +302,7 @@ export class AppComponent implements OnInit {
     this.dateData = generateData(5, false);
     this.dateDataWithRange = generateData(2, true);
     this.setColorScheme('cool');
+    this.setSchemeType(ScaleType.Ordinal);
     this.calendarData = this.getCalendarData();
     this.statusData = this.getStatusData();
     this.sparklineData = generateData(1, false, 30);
@@ -543,6 +555,18 @@ export class AppComponent implements OnInit {
     this.colorScheme = this.colorSets.find(s => s.name === name);
   }
 
+  setSchemeType(name) {
+    this.schemeType = name;
+    if (this.schemeType == ScaleType.Linear) {
+      this.customColors = this.customColorsLinear;
+      this.isLinear = true;
+    }
+    else {
+      this.customColors = this.customColorsNonlinear;
+      this.isLinear = false;
+    }
+  }
+
   onLegendLabelClick(entry) {
     console.log('Legend clicked', entry);
   }
diff --git a/src/app/chartTypes.ts b/src/app/chartTypes.ts
index 5e902dddd..af64bd582 100644
--- a/src/app/chartTypes.ts
+++ b/src/app/chartTypes.ts
@@ -33,7 +33,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'customColors'
         ]
       },
       {
@@ -67,7 +68,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'customColors'
         ],
         defaults: {
           yAxisLabel: 'Country',
@@ -106,7 +108,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'customColors'
         ]
       },
       {
@@ -141,7 +144,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'customColors'
         ],
         defaults: {
           yAxisLabel: 'Country',
@@ -178,7 +182,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'customColors'
         ]
       },
       {
@@ -211,7 +216,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'customColors'
         ],
         defaults: {
           yAxisLabel: 'Country',
@@ -246,7 +252,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'customColors'
         ],
         defaults: {
           yAxisLabel: 'Normalized GDP Per Capita',
@@ -281,7 +288,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'customColors'
         ],
         defaults: {
           yAxisLabel: 'Country',
@@ -365,7 +373,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'customColors'
         ],
         defaults: {
           yAxisLabel: 'GDP Per Capita',
@@ -398,7 +407,8 @@ const chartGroups = [
           'tooltipDisabled',
           'trimYAxisTicks',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'customColors'
         ],
         defaults: {
           yAxisLabel: 'GDP Per Capita',
@@ -439,7 +449,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'customColors'
         ],
         defaults: {
           yAxisLabel: 'GDP Per Capita',
@@ -480,7 +491,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'customColors'
         ],
         defaults: {
           yAxisLabel: 'GDP Per Capita',
@@ -517,7 +529,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'customColors'
         ],
         defaults: {
           yAxisLabel: 'Normalized GDP Per Capita',
@@ -562,7 +575,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'customColors'
         ],
         defaults: {
           xAxisLabel: 'Census Date',
@@ -592,7 +606,8 @@ const chartGroups = [
           'strokeColor',
           'strokeWidth',
           'tooltipDisabled',
-          'gradient'
+          'gradient',
+          'customColors'
         ],
         defaults: {
           xAxisLabel: 'Latin American Countries',
@@ -629,7 +644,8 @@ const chartGroups = [
           'maxYAxisTickLength',
           'min',
           'max',
-          'wrapTicks'
+          'wrapTicks',
+          'customColors'
         ],
         defaults: {
           yAxisLabel: 'Census Date',
@@ -720,7 +736,8 @@ const chartGroups = [
           'trimXAxisTicks',
           'trimYAxisTicks',
           'maxXAxisTickLength',
-          'maxYAxisTickLength'
+          'maxYAxisTickLength',
+          'customColors'
         ],
         defaults: {
           width: 1100,
@@ -764,7 +781,8 @@ const chartGroups = [
           'xScaleMin',
           'xScaleMax',
           'yScaleMin',
-          'yScaleMax'
+          'yScaleMax',
+          'customColors'
         ],
         defaults: {
           xAxisLabel: 'Order Total',
@@ -816,7 +834,8 @@ const chartGroups = [
           'yAxisLabel',
           'showGridLines',
           'roundDomains',
-          'tooltipDisabled'
+          'tooltipDisabled',
+          'customColors'
         ]
       },
       {
@@ -856,7 +875,8 @@ const chartGroups = [
           'trimXAxisTicks',
           'trimYAxisTicks',
           'maxXAxisTickLength',
-          'maxYAxisTickLength'
+          'maxYAxisTickLength',
+          'customColors'
         ],
         defaults: {
           yAxisLabel: 'GDP Per Capita',
@@ -880,7 +900,8 @@ const chartGroups = [
           'showXAxisLabel',
           'xAxisLabel',
           'showYAxisLabel',
-          'yAxisLabel'
+          'yAxisLabel',
+          'customColors'
         ]
       },
       {
@@ -911,7 +932,8 @@ const chartGroups = [
           'trimXAxisTicks',
           'trimYAxisTicks',
           'maxXAxisTickLength',
-          'maxYAxisTickLength'
+          'maxYAxisTickLength',
+          'customColors'
         ]
       },
       {
@@ -942,7 +964,8 @@ const chartGroups = [
           'trimXAxisTicks',
           'trimYAxisTicks',
           'maxXAxisTickLength',
-          'maxYAxisTickLength'
+          'maxYAxisTickLength',
+          'customColors'
         ]
       }
     ]
diff --git a/src/app/data.ts b/src/app/data.ts
index d313f4d9d..04448a6cd 100644
--- a/src/app/data.ts
+++ b/src/app/data.ts
@@ -59,21 +59,21 @@ export const multi: MultiSeries = [
     series: [
       {
         name: '2010',
-        value: 40632,
+        value: 0,
         extra: {
           code: 'de'
         }
       },
       {
         name: '2000',
-        value: 36953,
+        value: 1,
         extra: {
           code: 'de'
         }
       },
       {
         name: '1990',
-        value: 31476,
+        value: 2,
         extra: {
           code: 'de'
         }
@@ -85,21 +85,21 @@ export const multi: MultiSeries = [
     series: [
       {
         name: '2010',
-        value: 0,
+        value: 3,
         extra: {
           code: 'us'
         }
       },
       {
         name: '2000',
-        value: 45986,
+        value: 4,
         extra: {
           code: 'us'
         }
       },
       {
         name: '1990',
-        value: 37060,
+        value: 5,
         extra: {
           code: 'us'
         }
@@ -111,21 +111,21 @@ export const multi: MultiSeries = [
     series: [
       {
         name: '2010',
-        value: 36745,
+        value: 6,
         extra: {
           code: 'fr'
         }
       },
       {
         name: '2000',
-        value: 34774,
+        value: 7,
         extra: {
           code: 'fr'
         }
       },
       {
         name: '1990',
-        value: 29476,
+        value: 8,
         extra: {
           code: 'fr'
         }
@@ -137,21 +137,21 @@ export const multi: MultiSeries = [
     series: [
       {
         name: '2010',
-        value: 36240,
+        value: 9,
         extra: {
           code: 'uk'
         }
       },
       {
         name: '2000',
-        value: 32543,
+        value: 10,
         extra: {
           code: 'uk'
         }
       },
       {
         name: '1990',
-        value: 26424,
+        value: 11,
         extra: {
           code: 'uk'
         }

From b30df1dc12de3fb0ba431a648ec57bafd6b8857f Mon Sep 17 00:00:00 2001
From: Lyq322 <candyliuyq@gmail.com>
Date: Sun, 22 Oct 2023 13:50:13 -0500
Subject: [PATCH 02/10] Adjust gradient stops

Place gradient stop 1 at minimum and gradient stop 2 at maximum
---
 .../ngx-charts/src/lib/common/color.helper.ts | 30 +++++++++++--------
 .../heat-map-cell-series.component.ts         |  1 +
 src/app/app.component.html                    |  4 +--
 src/app/app.component.ts                      |  9 +++++-
 4 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts b/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
index 86b0ff2c8..2697da192 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
@@ -64,22 +64,26 @@ export class ColorHelper {
         break;
       case ScaleType.Linear:
         {
-          let colorDomain;
           if (this.customColors) {
-            colorDomain = [...this.customColors];
+            const colorDomain = [...this.customColors];
+            console.log("colorDomain as any", colorDomain);
+            colorScale = scaleLinear()
+              .range(colorDomain as any)
+              .domain([0, 1]);
           } 
           else {
-            colorDomain = [...scheme.domain];
-          }
-          if (colorDomain.length === 1) {
-            colorDomain.push(colorDomain[0]);
-            this.colorDomain = colorDomain;
-          }
+            const colorDomain = [...scheme.domain];
+
+            if (colorDomain.length === 1) {
+              colorDomain.push(colorDomain[0]);
+              this.colorDomain = colorDomain;
+            }
 
-          const points = range(0, 1, 1.0 / colorDomain.length);
-          colorScale = scaleLinear()
-            .range(colorDomain as any)
-            .domain(points);
+            const points = range(0, 1, 1.0 / colorDomain.length);
+            colorScale = scaleLinear()
+              .range(colorDomain as any)
+              .domain(points);
+          }
         }
         break;
       default:
@@ -97,7 +101,7 @@ export class ColorHelper {
       const valueScale = scaleLinear()
         .domain(this.domain as number[])
         .range([0, 1]);
-
+      console.log("?", valueScale(value as number));
       return this.scale(valueScale(value as number));
     } else {
       if (typeof this.customColors === 'function') {
diff --git a/projects/swimlane/ngx-charts/src/lib/heat-map/heat-map-cell-series.component.ts b/projects/swimlane/ngx-charts/src/lib/heat-map/heat-map-cell-series.component.ts
index 40d354537..a30373fb7 100644
--- a/projects/swimlane/ngx-charts/src/lib/heat-map/heat-map-cell-series.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/heat-map/heat-map-cell-series.component.ts
@@ -96,6 +96,7 @@ export class HeatCellSeriesComponent implements OnChanges, OnInit {
         const value = cell.value;
         cell.series = row.name;
 
+        console.log("color of cell", this.colors.getColor(value))
         cells.push({
           row,
           cell,
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 95bc09f94..f034bcac8 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1255,10 +1255,10 @@ <h3 (click)="optsVisible = !optsVisible" style="cursor: pointer">
           <br />
         </div>
         <div *ngIf="useCustomColors">
-          <label>Gradient Color 1:</label><input type="text" [(ngModel)]="customColorsLinear[0]" />
+          <label>Gradient Color 1:</label><input type="text" [(ngModel)]="gradientStop1" (ngModelChange)="setCustomColor()"/>
         </div>
         <div *ngIf="useCustomColors">
-          <label>Gradient Color 2:</label><input type="text" [(ngModel)]="customColorsLinear[1]" />
+          <label>Gradient Color 2:</label><input type="text" [(ngModel)]="gradientStop2" (ngModelChange)="setCustomColor()"/>
         </div>
         <div *ngIf="chart.options.includes('showXAxis')">
           <label>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 3216a5735..6a91bcbd1 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -181,6 +181,8 @@ export class AppComponent implements OnInit {
 
   useCustomColors: boolean = false;
   isLinear: boolean = false;
+  gradientStop1: string = '#0000ff';
+  gradientStop2: string = '#ffffff';
 
   // pie
   showLabels = true;
@@ -217,7 +219,7 @@ export class AppComponent implements OnInit {
 
   // heatmap
   heatmapMin: number = 0;
-  heatmapMax: number = 15;
+  heatmapMax: number = 11;
 
   // Combo Chart
   barChart: any[] = barChart;
@@ -567,6 +569,11 @@ export class AppComponent implements OnInit {
     }
   }
 
+  setCustomColor() {
+    this.customColorsLinear = [this.gradientStop1, this.gradientStop2];
+    this.customColors = this.customColorsLinear;
+  }
+
   onLegendLabelClick(entry) {
     console.log('Legend clicked', entry);
   }

From 49c22759b19d3f2075b61fe984d85e0913db69a5 Mon Sep 17 00:00:00 2001
From: Lyq322 <candyliuyq@gmail.com>
Date: Sun, 22 Oct 2023 13:58:23 -0500
Subject: [PATCH 03/10] Add custom color option to demo

Input is the two gradient stops
---
 .../src/lib/common/base-chart.component.ts    |  1 +
 src/app/app.component.html                    | 59 +++++++++++++++----
 src/app/app.component.ts                      | 13 ++--
 3 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/common/base-chart.component.ts b/projects/swimlane/ngx-charts/src/lib/common/base-chart.component.ts
index 9b192809c..846aa49ca 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/base-chart.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/base-chart.component.ts
@@ -34,6 +34,7 @@ export class BaseChartComponent implements OnChanges, AfterViewInit, OnDestroy,
   @Input() scheme: string | Color = 'cool';
   @Input() schemeType: ScaleType = ScaleType.Ordinal;
   @Input() customColors: any;
+  @Input() useCustomColors: any;
   @Input() animations: boolean = true;
 
   @Output() select = new EventEmitter();
diff --git a/src/app/app.component.html b/src/app/app.component.html
index f034bcac8..ea88d4b8d 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -8,6 +8,7 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
+        [useCustomColors]="useCustomColors"
         [results]="single"
         [animations]="animations"
         [gradient]="gradient"
@@ -46,6 +47,7 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
+        [useCustomColors]="useCustomColors"
         [results]="single"
         [animations]="animations"
         [gradient]="gradient"
@@ -84,6 +86,7 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
+        [useCustomColors]="useCustomColors"
         [results]="multi"
         [animations]="animations"
         [gradient]="gradient"
@@ -123,6 +126,7 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
+        [useCustomColors]="useCustomColors"
         [results]="multi"
         [animations]="animations"
         [gradient]="gradient"
@@ -162,6 +166,7 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
+        [useCustomColors]="useCustomColors"
         [results]="multi"
         [animations]="animations"
         [gradient]="gradient"
@@ -199,6 +204,7 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
+        [useCustomColors]="useCustomColors"
         [results]="multi"
         [animations]="animations"
         [gradient]="gradient"
@@ -236,6 +242,7 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
+        [useCustomColors]="useCustomColors"
         [results]="multi"
         [animations]="animations"
         [gradient]="gradient"
@@ -271,6 +278,7 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
+        [useCustomColors]="useCustomColors"
         [results]="multi"
         [animations]="animations"
         [gradient]="gradient"
@@ -305,6 +313,7 @@
         [view]="view"
         [scheme]="colorScheme"
         [customColors]="customColorsNonlinear"
+        [useCustomColors]="useCustomColors"
         [results]="single"
         [animations]="animations"
         [legend]="showLegend"
@@ -329,6 +338,7 @@
         [view]="view"
         [scheme]="colorScheme"
         [customColors]="customColorsNonlinear"
+        [useCustomColors]="useCustomColors"
         [results]="single"
         [valueFormatting]="valueFormatting"
         [animations]="animations"
@@ -346,6 +356,7 @@
         [view]="view"
         [scheme]="colorScheme"
         [customColors]="customColorsNonlinear"
+        [useCustomColors]="useCustomColors"
         [results]="single"
         [animations]="animations"
         [tooltipDisabled]="tooltipDisabled"
@@ -362,6 +373,7 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
+        [useCustomColors]="useCustomColors"
         [results]="dateDataWithOrWithoutRange"
         [animations]="animations"
         [legend]="showLegend"
@@ -403,6 +415,7 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
+        [useCustomColors]="useCustomColors"
         [results]="multi"
         [animations]="animations"
         [legend]="showLegend"
@@ -453,6 +466,7 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
+        [useCustomColors]="useCustomColors"
         [roundDomains]="roundDomains"
         [tooltipDisabled]="tooltipDisabled"
         [minRadius]="minRadius"
@@ -475,6 +489,7 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
+        [useCustomColors]="useCustomColors"
         [results]="dateData"
         [animations]="animations"
         [legend]="showLegend"
@@ -515,6 +530,7 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
+        [useCustomColors]="useCustomColors"
         [results]="dateData"
         [animations]="animations"
         [legend]="showLegend"
@@ -554,6 +570,7 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
+        [useCustomColors]="useCustomColors"
         [results]="dateData"
         [animations]="animations"
         [legend]="showLegend"
@@ -640,6 +657,7 @@
         [maxYAxisTickLength]="maxYAxisTickLength"
         [wrapTicks]="wrapTicks"
         [customColors]="customColorsLinear"
+        [useCustomColors]="useCustomColors"
         (select)="select($event)"
         (activate)="activate($event)"
         (deactivate)="deactivate($event)"
@@ -669,6 +687,7 @@
         [maxYAxisTickLength]="maxYAxisTickLength"
         [wrapTicks]="wrapTicks"
         [customColors]="customColorsLinear"
+        [useCustomColors]="useCustomColors"
         (select)="select($event)"
         (activate)="activate($event)"
         (deactivate)="deactivate($event)"
@@ -686,6 +705,7 @@
         [valueFormatting]="currencyFormatting"
         [gradient]="gradient"
         [customColors]="customColorsNonlinear"
+        [useCustomColors]="useCustomColors"
         (select)="select($event)"
       >
       </ngx-charts-tree-map>
@@ -699,6 +719,7 @@
         [results]="single"
         [animations]="animations"
         [customColors]="customColorsNonlinear"
+        [useCustomColors]="useCustomColors"
         (select)="select($event)"
       >
       </ngx-charts-number-card>
@@ -710,6 +731,7 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
+        [useCustomColors]="useCustomColors"
         [strokeColor]="strokeColor"
         [strokeWidth]="strokeWidth"
         [xAxis]="showXAxis"
@@ -760,6 +782,7 @@
           [view]="view"
           [scheme]="colorScheme"
           [customColors]="customColorsNonlinear"
+          [useCustomColors]="useCustomColors"
           cardColor="#232837"
           emptyColor="#1e222e"
           [results]="statusData"
@@ -792,6 +815,7 @@
         [tooltipDisabled]="tooltipDisabled"
         [showText]="showText"
         [customColors]="customColorsNonlinear"
+        [useCustomColors]="useCustomColors"
         (select)="select($event)"
         (activate)="activate($event)"
         (deactivate)="deactivate($event)"
@@ -809,6 +833,7 @@
         [previousValue]="gaugePreviousValue"
         [units]="gaugeUnits"
         [customColors]="customColorsNonlinear"
+        [useCustomColors]="useCustomColors"
         (select)="select($event)"
       >
       </ngx-charts-linear-gauge>
@@ -827,6 +852,7 @@
           [scheme]="colorScheme"
           [schemeType]="schemeType"
           [customColors]="customColors"
+          [useCustomColors]="useCustomColors"
           [results]="plotData"
           [animations]="animations"
           [legend]="false"
@@ -861,6 +887,7 @@
           [scheme]="colorScheme"
           [schemeType]="schemeType"
           [customColors]="customColors"
+          [useCustomColors]="useCustomColors"
           [results]="plotData"
           [animations]="animations"
           [legend]="false"
@@ -913,6 +940,7 @@ <h4 style="text-align: center">
           [tooltipDisabled]="tooltipDisabled"
           [gradient]="gradient"
           [customColors]="customColorsNonlinear"
+          [useCustomColors]="useCustomColors"
           (select)="treemapSelect($event)"
         >
         </ngx-charts-tree-map>
@@ -950,6 +978,7 @@ <h4 style="text-align: center">
           [scheme]="colorScheme"
           [schemeType]="schemeType"
           [customColors]="customColors"
+          [useCustomColors]="useCustomColors"
           [roundDomains]="roundDomains"
           [tooltipDisabled]="tooltipDisabled"
           [minRadius]="minRadius"
@@ -1002,6 +1031,7 @@ <h4 style="text-align: center">
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
+        [useCustomColors]="useCustomColors"
         [results]="single"
         [animations]="animations"
         [gradient]="gradient"
@@ -1217,6 +1247,22 @@ <h3 (click)="colorVisible = !colorVisible" style="cursor: pointer">
         <option *ngFor="let scheme of colorSets" [value]="scheme.name">{{ scheme.name }}</option>
       </select>
 
+      <div [hidden]="!colorVisible" style="margin-left: 10px">
+        <div *ngIf="chart.options.includes('customColors') && (isLinear || chartType === 'heat-map' || chartType === 'calendar')">
+          <label>
+            <input type="checkbox" [(ngModel)]="useCustomColors" />
+            Custom Colors
+          </label>
+          <br />
+        </div>
+        <div *ngIf="useCustomColors">
+          <label>Gradient Color 1:</label><input type="text" [(ngModel)]="gradientStop1" (ngModelChange)="setCustomColor()"/>
+        </div>
+        <div *ngIf="useCustomColors">
+          <label>Gradient Color 2:</label><input type="text" [(ngModel)]="gradientStop2" (ngModelChange)="setCustomColor()"/>
+        </div>
+      </div>
+
       <select
         *ngIf="chart.options.includes('schemeType')"
         [hidden]="!colorVisible"
@@ -1247,19 +1293,6 @@ <h3 (click)="optsVisible = !optsVisible" style="cursor: pointer">
           </label>
           <br />
         </div>
-        <div *ngIf="chart.options.includes('customColors') && (isLinear || chartType === 'heat-map' || chartType === 'calendar')">
-          <label>
-            <input type="checkbox" [(ngModel)]="useCustomColors" />
-            Custom Colors
-          </label>
-          <br />
-        </div>
-        <div *ngIf="useCustomColors">
-          <label>Gradient Color 1:</label><input type="text" [(ngModel)]="gradientStop1" (ngModelChange)="setCustomColor()"/>
-        </div>
-        <div *ngIf="useCustomColors">
-          <label>Gradient Color 2:</label><input type="text" [(ngModel)]="gradientStop2" (ngModelChange)="setCustomColor()"/>
-        </div>
         <div *ngIf="chart.options.includes('showXAxis')">
           <label>
             <input type="checkbox" [(ngModel)]="showXAxis" />
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 6a91bcbd1..49d316877 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -170,19 +170,16 @@ export class AppComponent implements OnInit {
   customColorsNonlinear: any[] = [
     {
       name: 'Germany',
-      value: '#000000'
+      value: '#a8385d'
     }
   ];
   
-  customColorsLinear: any[] = [
-    '#0000ff',
-    '#ffffff'
-  ];
+  customColorsLinear: any[];
 
   useCustomColors: boolean = false;
   isLinear: boolean = false;
-  gradientStop1: string = '#0000ff';
-  gradientStop2: string = '#ffffff';
+  gradientStop1: string;
+  gradientStop2: string;
 
   // pie
   showLabels = true;
@@ -219,7 +216,7 @@ export class AppComponent implements OnInit {
 
   // heatmap
   heatmapMin: number = 0;
-  heatmapMax: number = 11;
+  heatmapMax: number = 15;
 
   // Combo Chart
   barChart: any[] = barChart;

From af4e79102157439137ec28ad279a217ee0a21c5e Mon Sep 17 00:00:00 2001
From: Lyq322 <candyliuyq@gmail.com>
Date: Sun, 22 Oct 2023 14:03:33 -0500
Subject: [PATCH 04/10] Cleanup

---
 src/app/app.component.html | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index ea88d4b8d..67afb60fe 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1239,7 +1239,7 @@ <h3 (click)="colorVisible = !colorVisible" style="cursor: pointer">
         <strong>Color Scheme</strong>
       </h3>
       <select
-        [hidden]="!colorVisible"
+        [hidden]="!colorVisible || (useCustomColors && isLinear)"
         style="margin-left: 10px"
         [ngModel]="selectedColorScheme"
         (ngModelChange)="setColorScheme($event)"
@@ -1247,6 +1247,17 @@ <h3 (click)="colorVisible = !colorVisible" style="cursor: pointer">
         <option *ngFor="let scheme of colorSets" [value]="scheme.name">{{ scheme.name }}</option>
       </select>
 
+      <select
+        *ngIf="chart.options.includes('schemeType')"
+        [hidden]="!colorVisible"
+        style="margin-left: 10px"
+        [ngModel]="schemeType"
+        (ngModelChange)="setSchemeType($event)"
+      >
+        <option value="ordinal">Ordinal</option>
+        <option value="linear">Linear</option>
+      </select>
+
       <div [hidden]="!colorVisible" style="margin-left: 10px">
         <div *ngIf="chart.options.includes('customColors') && (isLinear || chartType === 'heat-map' || chartType === 'calendar')">
           <label>
@@ -1255,25 +1266,14 @@ <h3 (click)="colorVisible = !colorVisible" style="cursor: pointer">
           </label>
           <br />
         </div>
-        <div *ngIf="useCustomColors">
+        <div *ngIf="useCustomColors && (isLinear || chartType === 'heat-map' || chartType === 'calendar')">
           <label>Gradient Color 1:</label><input type="text" [(ngModel)]="gradientStop1" (ngModelChange)="setCustomColor()"/>
         </div>
-        <div *ngIf="useCustomColors">
+        <div *ngIf="useCustomColors && (isLinear || chartType === 'heat-map' || chartType === 'calendar')">
           <label>Gradient Color 2:</label><input type="text" [(ngModel)]="gradientStop2" (ngModelChange)="setCustomColor()"/>
         </div>
       </div>
 
-      <select
-        *ngIf="chart.options.includes('schemeType')"
-        [hidden]="!colorVisible"
-        style="margin-left: 10px"
-        [ngModel]="schemeType"
-        (ngModelChange)="setSchemeType($event)"
-      >
-        <option value="ordinal">Ordinal</option>
-        <option value="linear">Linear</option>
-      </select>
-
       <div [hidden]="!colorVisible || !range" style="margin-left: 10px">
         <div>
           <label>Range fill color opacity (0.0 - 1.0):</label><br />

From f4f655da4b37c9b0341d48b9d078599c2ecd2ecd Mon Sep 17 00:00:00 2001
From: Lyq322 <candyliuyq@gmail.com>
Date: Sun, 22 Oct 2023 14:19:29 -0500
Subject: [PATCH 05/10] Reset custom color when deselected in demo

---
 .../ngx-charts/src/lib/common/color.helper.ts         |  3 ---
 .../lib/heat-map/heat-map-cell-series.component.ts    |  1 -
 .../ngx-charts/src/lib/heat-map/heat-map.component.ts |  1 -
 src/app/app.component.html                            |  2 +-
 src/app/app.component.ts                              | 11 ++++++++++-
 5 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts b/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
index 2697da192..6f98434ab 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
@@ -66,7 +66,6 @@ export class ColorHelper {
         {
           if (this.customColors) {
             const colorDomain = [...this.customColors];
-            console.log("colorDomain as any", colorDomain);
             colorScale = scaleLinear()
               .range(colorDomain as any)
               .domain([0, 1]);
@@ -101,7 +100,6 @@ export class ColorHelper {
       const valueScale = scaleLinear()
         .domain(this.domain as number[])
         .range([0, 1]);
-      console.log("?", valueScale(value as number));
       return this.scale(valueScale(value as number));
     } else {
       if (typeof this.customColors === 'function') {
@@ -132,7 +130,6 @@ export class ColorHelper {
       .domain(this.domain as number[])
       .range([0, 1]);
 
-    console.log(this.colorDomain);
     const colorValueScale = scaleBand().domain(this.colorDomain).range([0, 1]);
 
     const endColor = this.getColor(value);
diff --git a/projects/swimlane/ngx-charts/src/lib/heat-map/heat-map-cell-series.component.ts b/projects/swimlane/ngx-charts/src/lib/heat-map/heat-map-cell-series.component.ts
index a30373fb7..40d354537 100644
--- a/projects/swimlane/ngx-charts/src/lib/heat-map/heat-map-cell-series.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/heat-map/heat-map-cell-series.component.ts
@@ -96,7 +96,6 @@ export class HeatCellSeriesComponent implements OnChanges, OnInit {
         const value = cell.value;
         cell.series = row.name;
 
-        console.log("color of cell", this.colors.getColor(value))
         cells.push({
           row,
           cell,
diff --git a/projects/swimlane/ngx-charts/src/lib/heat-map/heat-map.component.ts b/projects/swimlane/ngx-charts/src/lib/heat-map/heat-map.component.ts
index 90e33f218..fab3b87b9 100644
--- a/projects/swimlane/ngx-charts/src/lib/heat-map/heat-map.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/heat-map/heat-map.component.ts
@@ -300,7 +300,6 @@ export class HeatMapComponent extends BaseChartComponent {
   }
 
   setColors(): void {
-    console.log("heat", this.customColors);
     this.colors = new ColorHelper(this.scheme, this.scaleType, this.valueDomain, this.customColors);
   }
 
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 67afb60fe..761aba59f 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1261,7 +1261,7 @@ <h3 (click)="colorVisible = !colorVisible" style="cursor: pointer">
       <div [hidden]="!colorVisible" style="margin-left: 10px">
         <div *ngIf="chart.options.includes('customColors') && (isLinear || chartType === 'heat-map' || chartType === 'calendar')">
           <label>
-            <input type="checkbox" [(ngModel)]="useCustomColors" />
+            <input type="checkbox" [(ngModel)]="useCustomColors" (ngModelChange)="resetCustomColor()"/>
             Custom Colors
           </label>
           <br />
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 49d316877..dc8188e21 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -275,7 +275,6 @@ export class AppComponent implements OnInit {
   optsVisible: boolean = true;
 
   constructor(public location: Location) {
-    console.log("constructor")
     this.mathFunction = this.getFunction();
 
     Object.assign(this, {
@@ -571,6 +570,16 @@ export class AppComponent implements OnInit {
     this.customColors = this.customColorsLinear;
   }
 
+  resetCustomColor() {
+    if (this.useCustomColors) {
+      this.setCustomColor();
+    }
+    else {
+      this.customColorsLinear = undefined;
+      this.customColors = undefined;
+    }
+  }
+
   onLegendLabelClick(entry) {
     console.log('Legend clicked', entry);
   }

From 804b5d32158c91f871032427232f317d51389555 Mon Sep 17 00:00:00 2001
From: Lyq322 <candyliuyq@gmail.com>
Date: Tue, 24 Oct 2023 19:19:54 -0500
Subject: [PATCH 06/10] Add additional gradient stop option

---
 .../ngx-charts/src/lib/common/color.helper.ts         |  3 ++-
 src/app/app.component.html                            | 11 ++++-------
 src/app/app.component.ts                              | 10 ++++------
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts b/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
index 6f98434ab..a2e0bd13c 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
@@ -68,7 +68,7 @@ export class ColorHelper {
             const colorDomain = [...this.customColors];
             colorScale = scaleLinear()
               .range(colorDomain as any)
-              .domain([0, 1]);
+              .domain(range(0, 1, 0.999 / (colorDomain.length - 1)));
           } 
           else {
             const colorDomain = [...scheme.domain];
@@ -100,6 +100,7 @@ export class ColorHelper {
       const valueScale = scaleLinear()
         .domain(this.domain as number[])
         .range([0, 1]);
+      console.log(valueScale(value as number));
       return this.scale(valueScale(value as number));
     } else {
       if (typeof this.customColors === 'function') {
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 761aba59f..5403b903c 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1239,7 +1239,7 @@ <h3 (click)="colorVisible = !colorVisible" style="cursor: pointer">
         <strong>Color Scheme</strong>
       </h3>
       <select
-        [hidden]="!colorVisible || (useCustomColors && isLinear)"
+        [hidden]="!colorVisible || (useCustomColors && (schemeType === linearScaleType || chartType === 'heat-map' || chartType === 'calendar'))"
         style="margin-left: 10px"
         [ngModel]="selectedColorScheme"
         (ngModelChange)="setColorScheme($event)"
@@ -1259,18 +1259,15 @@ <h3 (click)="colorVisible = !colorVisible" style="cursor: pointer">
       </select>
 
       <div [hidden]="!colorVisible" style="margin-left: 10px">
-        <div *ngIf="chart.options.includes('customColors') && (isLinear || chartType === 'heat-map' || chartType === 'calendar')">
+        <div *ngIf="chart.options.includes('customColors') && (schemeType === linearScaleType || chartType === 'heat-map' || chartType === 'calendar')">
           <label>
             <input type="checkbox" [(ngModel)]="useCustomColors" (ngModelChange)="resetCustomColor()"/>
             Custom Colors
           </label>
           <br />
         </div>
-        <div *ngIf="useCustomColors && (isLinear || chartType === 'heat-map' || chartType === 'calendar')">
-          <label>Gradient Color 1:</label><input type="text" [(ngModel)]="gradientStop1" (ngModelChange)="setCustomColor()"/>
-        </div>
-        <div *ngIf="useCustomColors && (isLinear || chartType === 'heat-map' || chartType === 'calendar')">
-          <label>Gradient Color 2:</label><input type="text" [(ngModel)]="gradientStop2" (ngModelChange)="setCustomColor()"/>
+        <div *ngIf="useCustomColors && (schemeType === linearScaleType || chartType === 'heat-map' || chartType === 'calendar')">
+          <label>Gradient Color Stops:</label><input type="text" [(ngModel)]="gradientStops" (ngModelChange)="setCustomColor()"/>
         </div>
       </div>
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index dc8188e21..12e6fd662 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -161,6 +161,7 @@ export class AppComponent implements OnInit {
   colorSets: any;
   colorScheme: any;
   schemeType = ScaleType.Ordinal;
+  linearScaleType = ScaleType.Linear;
   selectedColorScheme: string;
   rangeFillOpacity: number = 0.15;
 
@@ -177,9 +178,7 @@ export class AppComponent implements OnInit {
   customColorsLinear: any[];
 
   useCustomColors: boolean = false;
-  isLinear: boolean = false;
-  gradientStop1: string;
-  gradientStop2: string;
+  gradientStops: string = "#0000ff, #ff0000";
 
   // pie
   showLabels = true;
@@ -557,16 +556,15 @@ export class AppComponent implements OnInit {
     this.schemeType = name;
     if (this.schemeType == ScaleType.Linear) {
       this.customColors = this.customColorsLinear;
-      this.isLinear = true;
     }
     else {
       this.customColors = this.customColorsNonlinear;
-      this.isLinear = false;
     }
   }
 
   setCustomColor() {
-    this.customColorsLinear = [this.gradientStop1, this.gradientStop2];
+    console.log("this.setCustomColor", this.useCustomColors);
+    this.customColorsLinear = this.gradientStops.split(',');
     this.customColors = this.customColorsLinear;
   }
 

From ffa069ac3aca716f59c976efaadf3a5417e67e78 Mon Sep 17 00:00:00 2001
From: Lyq322 <candyliuyq@gmail.com>
Date: Sat, 28 Oct 2023 12:12:30 -0500
Subject: [PATCH 07/10] Fix last gradient stop bug

Last color stop of linear gradient is taking up 2 stops instead of one stop for each color.
---
 .../ngx-charts/src/lib/common/color.helper.ts | 21 +++++++++----------
 src/app/app.component.ts                      |  2 +-
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts b/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
index a2e0bd13c..1abf8bb9e 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
@@ -68,7 +68,7 @@ export class ColorHelper {
             const colorDomain = [...this.customColors];
             colorScale = scaleLinear()
               .range(colorDomain as any)
-              .domain(range(0, 1, 0.999 / (colorDomain.length - 1)));
+              .domain(range(0, 1, 0.9999 / (colorDomain.length - 1)));
           } 
           else {
             const colorDomain = [...scheme.domain];
@@ -78,7 +78,7 @@ export class ColorHelper {
               this.colorDomain = colorDomain;
             }
 
-            const points = range(0, 1, 1.0 / colorDomain.length);
+            const points = range(0, 1, 0.9999 / (colorDomain.length - 1));
             colorScale = scaleLinear()
               .range(colorDomain as any)
               .domain(points);
@@ -100,7 +100,6 @@ export class ColorHelper {
       const valueScale = scaleLinear()
         .domain(this.domain as number[])
         .range([0, 1]);
-      console.log(valueScale(value as number));
       return this.scale(valueScale(value as number));
     } else {
       if (typeof this.customColors === 'function') {
@@ -131,7 +130,7 @@ export class ColorHelper {
       .domain(this.domain as number[])
       .range([0, 1]);
 
-    const colorValueScale = scaleBand().domain(this.colorDomain).range([0, 1]);
+    const colorValueScale = scaleBand().domain(this.colorDomain.slice(1)).range([0, 1]);
 
     const endColor = this.getColor(value);
 
@@ -151,24 +150,24 @@ export class ColorHelper {
       opacity: 1
     });
 
-    while (currentVal < endVal && i < this.colorDomain.length) {
+    while (i < this.colorDomain.length) {
       const color = this.colorDomain[i];
-      const offset = colorValueScale(color);
+      const offset = colorValueScale(color) + colorValueScale.bandwidth();
+
+      if (offset >= endVal) {
+        break;
+      }
+
       if (offset <= startVal) {
         i++;
         continue;
       }
 
-      if (offset.toFixed(4) >= (endVal - colorValueScale.bandwidth()).toFixed(4)) {
-        break;
-      }
-
       stops.push({
         color,
         offset,
         opacity: 1
       });
-      currentVal = offset;
       i++;
     }
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 12e6fd662..cc70e39cf 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -178,7 +178,7 @@ export class AppComponent implements OnInit {
   customColorsLinear: any[];
 
   useCustomColors: boolean = false;
-  gradientStops: string = "#0000ff, #ff0000";
+  gradientStops: string = "#0000ff, #ff0000, #0000ff";
 
   // pie
   showLabels = true;

From da83d41984e8b9745c1e05569c3070d9bc7bd4e2 Mon Sep 17 00:00:00 2001
From: Lyq322 <candyliuyq@gmail.com>
Date: Sun, 29 Oct 2023 20:08:13 -0500
Subject: [PATCH 08/10] Fix errors when switching from heat map to other linear
 charts

---
 src/app/app.component.html | 4 ++--
 src/app/app.component.ts   | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 5403b903c..c1c130fc4 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1239,7 +1239,7 @@ <h3 (click)="colorVisible = !colorVisible" style="cursor: pointer">
         <strong>Color Scheme</strong>
       </h3>
       <select
-        [hidden]="!colorVisible || (useCustomColors && (schemeType === linearScaleType || chartType === 'heat-map' || chartType === 'calendar'))"
+        [hidden]="!colorVisible || (chart.options.includes('customColors') && useCustomColors && (schemeType === linearScaleType || chartType === 'heat-map' || chartType === 'calendar'))"
         style="margin-left: 10px"
         [ngModel]="selectedColorScheme"
         (ngModelChange)="setColorScheme($event)"
@@ -1266,7 +1266,7 @@ <h3 (click)="colorVisible = !colorVisible" style="cursor: pointer">
           </label>
           <br />
         </div>
-        <div *ngIf="useCustomColors && (schemeType === linearScaleType || chartType === 'heat-map' || chartType === 'calendar')">
+        <div *ngIf="chart.options.includes('customColors') && useCustomColors && (schemeType === linearScaleType || chartType === 'heat-map' || chartType === 'calendar')">
           <label>Gradient Color Stops:</label><input type="text" [(ngModel)]="gradientStops" (ngModelChange)="setCustomColor()"/>
         </div>
       </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index cc70e39cf..488f38157 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -520,6 +520,8 @@ export class AppComponent implements OnInit {
     if (!this.fitContainer) {
       this.applyDimensions();
     }
+
+    this.setSchemeType(this.schemeType);
   }
 
   changeTheme(theme: string) {

From a3a99d96ff6d7d7ae3dcb39bded13cc93875adaf Mon Sep 17 00:00:00 2001
From: Lyq322 <candyliuyq@gmail.com>
Date: Sun, 29 Oct 2023 20:14:40 -0500
Subject: [PATCH 09/10] Cleanup code

---
 .../src/lib/common/base-chart.component.ts    |  1 -
 .../ngx-charts/src/lib/common/color.helper.ts |  1 +
 src/app/app.component.html                    | 31 -------------------
 src/app/app.component.ts                      |  3 +-
 src/app/data.ts                               | 24 +++++++-------
 5 files changed, 14 insertions(+), 46 deletions(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/common/base-chart.component.ts b/projects/swimlane/ngx-charts/src/lib/common/base-chart.component.ts
index 846aa49ca..9b192809c 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/base-chart.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/base-chart.component.ts
@@ -34,7 +34,6 @@ export class BaseChartComponent implements OnChanges, AfterViewInit, OnDestroy,
   @Input() scheme: string | Color = 'cool';
   @Input() schemeType: ScaleType = ScaleType.Ordinal;
   @Input() customColors: any;
-  @Input() useCustomColors: any;
   @Input() animations: boolean = true;
 
   @Output() select = new EventEmitter();
diff --git a/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts b/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
index 1abf8bb9e..85c3a8b6a 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
@@ -100,6 +100,7 @@ export class ColorHelper {
       const valueScale = scaleLinear()
         .domain(this.domain as number[])
         .range([0, 1]);
+        
       return this.scale(valueScale(value as number));
     } else {
       if (typeof this.customColors === 'function') {
diff --git a/src/app/app.component.html b/src/app/app.component.html
index c1c130fc4..d612a0813 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -8,7 +8,6 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
-        [useCustomColors]="useCustomColors"
         [results]="single"
         [animations]="animations"
         [gradient]="gradient"
@@ -47,7 +46,6 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
-        [useCustomColors]="useCustomColors"
         [results]="single"
         [animations]="animations"
         [gradient]="gradient"
@@ -86,7 +84,6 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
-        [useCustomColors]="useCustomColors"
         [results]="multi"
         [animations]="animations"
         [gradient]="gradient"
@@ -126,7 +123,6 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
-        [useCustomColors]="useCustomColors"
         [results]="multi"
         [animations]="animations"
         [gradient]="gradient"
@@ -166,7 +162,6 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
-        [useCustomColors]="useCustomColors"
         [results]="multi"
         [animations]="animations"
         [gradient]="gradient"
@@ -204,7 +199,6 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
-        [useCustomColors]="useCustomColors"
         [results]="multi"
         [animations]="animations"
         [gradient]="gradient"
@@ -242,7 +236,6 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
-        [useCustomColors]="useCustomColors"
         [results]="multi"
         [animations]="animations"
         [gradient]="gradient"
@@ -278,7 +271,6 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
-        [useCustomColors]="useCustomColors"
         [results]="multi"
         [animations]="animations"
         [gradient]="gradient"
@@ -313,7 +305,6 @@
         [view]="view"
         [scheme]="colorScheme"
         [customColors]="customColorsNonlinear"
-        [useCustomColors]="useCustomColors"
         [results]="single"
         [animations]="animations"
         [legend]="showLegend"
@@ -338,7 +329,6 @@
         [view]="view"
         [scheme]="colorScheme"
         [customColors]="customColorsNonlinear"
-        [useCustomColors]="useCustomColors"
         [results]="single"
         [valueFormatting]="valueFormatting"
         [animations]="animations"
@@ -356,7 +346,6 @@
         [view]="view"
         [scheme]="colorScheme"
         [customColors]="customColorsNonlinear"
-        [useCustomColors]="useCustomColors"
         [results]="single"
         [animations]="animations"
         [tooltipDisabled]="tooltipDisabled"
@@ -373,7 +362,6 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
-        [useCustomColors]="useCustomColors"
         [results]="dateDataWithOrWithoutRange"
         [animations]="animations"
         [legend]="showLegend"
@@ -415,7 +403,6 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
-        [useCustomColors]="useCustomColors"
         [results]="multi"
         [animations]="animations"
         [legend]="showLegend"
@@ -466,7 +453,6 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
-        [useCustomColors]="useCustomColors"
         [roundDomains]="roundDomains"
         [tooltipDisabled]="tooltipDisabled"
         [minRadius]="minRadius"
@@ -489,7 +475,6 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
-        [useCustomColors]="useCustomColors"
         [results]="dateData"
         [animations]="animations"
         [legend]="showLegend"
@@ -530,7 +515,6 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
-        [useCustomColors]="useCustomColors"
         [results]="dateData"
         [animations]="animations"
         [legend]="showLegend"
@@ -570,7 +554,6 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
-        [useCustomColors]="useCustomColors"
         [results]="dateData"
         [animations]="animations"
         [legend]="showLegend"
@@ -630,7 +613,6 @@
         (select)="onSelect($event)"
       >
       </combo-chart-component>
-      <!--combo chart??-->
       <ngx-charts-heat-map
         *ngIf="chartType === 'heat-map'"
         class="chart-container"
@@ -657,7 +639,6 @@
         [maxYAxisTickLength]="maxYAxisTickLength"
         [wrapTicks]="wrapTicks"
         [customColors]="customColorsLinear"
-        [useCustomColors]="useCustomColors"
         (select)="select($event)"
         (activate)="activate($event)"
         (deactivate)="deactivate($event)"
@@ -687,7 +668,6 @@
         [maxYAxisTickLength]="maxYAxisTickLength"
         [wrapTicks]="wrapTicks"
         [customColors]="customColorsLinear"
-        [useCustomColors]="useCustomColors"
         (select)="select($event)"
         (activate)="activate($event)"
         (deactivate)="deactivate($event)"
@@ -705,7 +685,6 @@
         [valueFormatting]="currencyFormatting"
         [gradient]="gradient"
         [customColors]="customColorsNonlinear"
-        [useCustomColors]="useCustomColors"
         (select)="select($event)"
       >
       </ngx-charts-tree-map>
@@ -719,7 +698,6 @@
         [results]="single"
         [animations]="animations"
         [customColors]="customColorsNonlinear"
-        [useCustomColors]="useCustomColors"
         (select)="select($event)"
       >
       </ngx-charts-number-card>
@@ -731,7 +709,6 @@
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
-        [useCustomColors]="useCustomColors"
         [strokeColor]="strokeColor"
         [strokeWidth]="strokeWidth"
         [xAxis]="showXAxis"
@@ -782,7 +759,6 @@
           [view]="view"
           [scheme]="colorScheme"
           [customColors]="customColorsNonlinear"
-          [useCustomColors]="useCustomColors"
           cardColor="#232837"
           emptyColor="#1e222e"
           [results]="statusData"
@@ -815,7 +791,6 @@
         [tooltipDisabled]="tooltipDisabled"
         [showText]="showText"
         [customColors]="customColorsNonlinear"
-        [useCustomColors]="useCustomColors"
         (select)="select($event)"
         (activate)="activate($event)"
         (deactivate)="deactivate($event)"
@@ -833,7 +808,6 @@
         [previousValue]="gaugePreviousValue"
         [units]="gaugeUnits"
         [customColors]="customColorsNonlinear"
-        [useCustomColors]="useCustomColors"
         (select)="select($event)"
       >
       </ngx-charts-linear-gauge>
@@ -852,7 +826,6 @@
           [scheme]="colorScheme"
           [schemeType]="schemeType"
           [customColors]="customColors"
-          [useCustomColors]="useCustomColors"
           [results]="plotData"
           [animations]="animations"
           [legend]="false"
@@ -887,7 +860,6 @@
           [scheme]="colorScheme"
           [schemeType]="schemeType"
           [customColors]="customColors"
-          [useCustomColors]="useCustomColors"
           [results]="plotData"
           [animations]="animations"
           [legend]="false"
@@ -940,7 +912,6 @@ <h4 style="text-align: center">
           [tooltipDisabled]="tooltipDisabled"
           [gradient]="gradient"
           [customColors]="customColorsNonlinear"
-          [useCustomColors]="useCustomColors"
           (select)="treemapSelect($event)"
         >
         </ngx-charts-tree-map>
@@ -978,7 +949,6 @@ <h4 style="text-align: center">
           [scheme]="colorScheme"
           [schemeType]="schemeType"
           [customColors]="customColors"
-          [useCustomColors]="useCustomColors"
           [roundDomains]="roundDomains"
           [tooltipDisabled]="tooltipDisabled"
           [minRadius]="minRadius"
@@ -1031,7 +1001,6 @@ <h4 style="text-align: center">
         [scheme]="colorScheme"
         [schemeType]="schemeType"
         [customColors]="customColors"
-        [useCustomColors]="useCustomColors"
         [results]="single"
         [animations]="animations"
         [gradient]="gradient"
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 488f38157..07de23f41 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -215,7 +215,7 @@ export class AppComponent implements OnInit {
 
   // heatmap
   heatmapMin: number = 0;
-  heatmapMax: number = 15;
+  heatmapMax: number = 50000;
 
   // Combo Chart
   barChart: any[] = barChart;
@@ -565,7 +565,6 @@ export class AppComponent implements OnInit {
   }
 
   setCustomColor() {
-    console.log("this.setCustomColor", this.useCustomColors);
     this.customColorsLinear = this.gradientStops.split(',');
     this.customColors = this.customColorsLinear;
   }
diff --git a/src/app/data.ts b/src/app/data.ts
index 04448a6cd..d313f4d9d 100644
--- a/src/app/data.ts
+++ b/src/app/data.ts
@@ -59,21 +59,21 @@ export const multi: MultiSeries = [
     series: [
       {
         name: '2010',
-        value: 0,
+        value: 40632,
         extra: {
           code: 'de'
         }
       },
       {
         name: '2000',
-        value: 1,
+        value: 36953,
         extra: {
           code: 'de'
         }
       },
       {
         name: '1990',
-        value: 2,
+        value: 31476,
         extra: {
           code: 'de'
         }
@@ -85,21 +85,21 @@ export const multi: MultiSeries = [
     series: [
       {
         name: '2010',
-        value: 3,
+        value: 0,
         extra: {
           code: 'us'
         }
       },
       {
         name: '2000',
-        value: 4,
+        value: 45986,
         extra: {
           code: 'us'
         }
       },
       {
         name: '1990',
-        value: 5,
+        value: 37060,
         extra: {
           code: 'us'
         }
@@ -111,21 +111,21 @@ export const multi: MultiSeries = [
     series: [
       {
         name: '2010',
-        value: 6,
+        value: 36745,
         extra: {
           code: 'fr'
         }
       },
       {
         name: '2000',
-        value: 7,
+        value: 34774,
         extra: {
           code: 'fr'
         }
       },
       {
         name: '1990',
-        value: 8,
+        value: 29476,
         extra: {
           code: 'fr'
         }
@@ -137,21 +137,21 @@ export const multi: MultiSeries = [
     series: [
       {
         name: '2010',
-        value: 9,
+        value: 36240,
         extra: {
           code: 'uk'
         }
       },
       {
         name: '2000',
-        value: 10,
+        value: 32543,
         extra: {
           code: 'uk'
         }
       },
       {
         name: '1990',
-        value: 11,
+        value: 26424,
         extra: {
           code: 'uk'
         }

From 9cc3ab5ba7317444a284c1dc8ac9eed4a1842a93 Mon Sep 17 00:00:00 2001
From: Lyq322 <candyliuyq@gmail.com>
Date: Sun, 29 Oct 2023 20:16:53 -0500
Subject: [PATCH 10/10] Cleanup code

---
 projects/swimlane/ngx-charts/src/lib/common/color.helper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts b/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
index 85c3a8b6a..be94d7d40 100644
--- a/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
+++ b/projects/swimlane/ngx-charts/src/lib/common/color.helper.ts
@@ -100,7 +100,7 @@ export class ColorHelper {
       const valueScale = scaleLinear()
         .domain(this.domain as number[])
         .range([0, 1]);
-        
+
       return this.scale(valueScale(value as number));
     } else {
       if (typeof this.customColors === 'function') {