Highlight negative values in performance timeline chart

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -449,8 +449,8 @@
             groupBy="year"
             [benchmarkDataItems]="performancePercentagesByYear"
             [benchmarkDataLabel]="performanceTimelineDataLabel"
-            [colorizeSign]="true"
             [colorScheme]="user?.settings?.colorScheme"
+            [highlightNegativeValues]="true"
             [isInPercentage]="true"
             [isLoading]="isLoadingPerformanceTimelineChart"
             [locale]="user?.settings?.locale"

libs/ui/src/lib/investment-chart/investment-chart.component.stories.ts

@@ -16,6 +16,65 @@ export default {
 
 type Story = StoryObj<GfInvestmentChartComponent>;
 
+export const InvestmentsByMonth: Story = {
+  args: {
+    benchmarkDataItems: [
+      {
+        date: '2025-01-01',
+        investment: 1000
+      },
+      {
+        date: '2025-02-01',
+        investment: 1000
+      },
+      {
+        date: '2025-03-01',
+        investment: 500
+      },
+      {
+        date: '2025-04-01',
+        investment: 1500
+      },
+      {
+        date: '2025-05-01',
+        investment: -2500
+      },
+      {
+        date: '2025-06-01',
+        investment: 1000
+      },
+      {
+        date: '2025-07-01',
+        investment: 0
+      },
+      {
+        date: '2025-08-01',
+        investment: 2000
+      },
+      {
+        date: '2025-09-01',
+        investment: 1000
+      },
+      {
+        date: '2025-10-01',
+        investment: -800
+      },
+      {
+        date: '2025-11-01',
+        investment: 1000
+      },
+      {
+        date: '2025-12-01',
+        investment: 1200
+      }
+    ],
+    benchmarkDataLabel: 'Invested Capital',
+    currency: 'USD',
+    groupBy: 'month',
+    locale: 'en-US'
+  }
+};
+
 export const PerformanceByYear: Story = {
   args: {
     benchmarkDataItems: [
@@ -69,8 +128,8 @@ export const PerformanceByYear: Story = {
       }
     ],
     benchmarkDataLabel: 'Net Performance',
-    colorizeSign: true,
     groupBy: 'year',
+    highlightNegativeValues: true,
     isInPercentage: true
   }
 };

libs/ui/src/lib/investment-chart/investment-chart.component.ts

@@ -62,10 +62,10 @@ const { orange } = OpenColor;
 export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
   @Input() public benchmarkDataItems: InvestmentItem[] = [];
   @Input() public benchmarkDataLabel = '';
-  @Input() public colorizeSign = false;
   @Input() public colorScheme?: ColorScheme;
   @Input() public currency?: string;
   @Input() public groupBy?: GroupBy;
+  @Input() public highlightNegativeValues = false;
   @Input() public historicalDataItems: LineChartItem[] = [];
   @Input() public isInPercentage?: boolean = false;
   @Input() public isLoading = false;
@@ -122,6 +122,7 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
     const isBarChart = !!this.groupBy;
 
     const benchmarkColorRgb = isBarChart ? primaryColorRgb : secondaryColorRgb;
+    const benchmarkColor = `rgb(${benchmarkColorRgb.r}, ${benchmarkColorRgb.g}, ${benchmarkColorRgb.b})`;
 
     // Create clones of the input data
     this.investments = this.benchmarkDataItems.map((item) =>
@@ -142,14 +143,14 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
             if (
               (context.parsed?.y ?? 0) < 0 &&
               isBarChart &&
-              this.colorizeSign
+              this.highlightNegativeValues
             ) {
               return orange[5];
             }
 
-            return `rgb(${benchmarkColorRgb.r}, ${benchmarkColorRgb.g}, ${benchmarkColorRgb.b})`;
+            return benchmarkColor;
           },
-          borderColor: `rgb(${benchmarkColorRgb.r}, ${benchmarkColorRgb.g}, ${benchmarkColorRgb.b})`,
+          borderColor: benchmarkColor,
           borderWidth: isBarChart ? 0 : 1,
           data: this.investments.map(({ date, investment }) => {
             return {