Highlight negative values in performance timeline chart

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

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

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

@@ -69,6 +69,7 @@ export const PerformanceByYear: Story = {
       }
     ],
     benchmarkDataLabel: 'Net Performance',
+    colorizeSign: true,
     groupBy: 'year',
     isInPercentage: true
   }

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

@@ -32,6 +32,7 @@ import {
   LineController,
   LineElement,
   PointElement,
+  type ScriptableContext,
   type ScriptableLineSegmentContext,
   TimeScale,
   Tooltip,
@@ -41,6 +42,7 @@ import 'chartjs-adapter-date-fns';
 import { type AnnotationOptions } from 'chartjs-plugin-annotation';
 import { isFuture } from 'date-fns';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import OpenColor from 'open-color';
 
 import {
   getTimeSeriesTooltipOptions,
@@ -48,6 +50,8 @@ import {
   registerChartConfiguration
 } from '../chart';
 
+const { orange } = OpenColor;
+
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [NgxSkeletonLoaderModule],
@@ -58,6 +62,7 @@ import {
 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;
@@ -133,7 +138,17 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
       }),
       datasets: [
         {
-          backgroundColor: `rgb(${benchmarkColorRgb.r}, ${benchmarkColorRgb.g}, ${benchmarkColorRgb.b})`,
+          backgroundColor: (context: ScriptableContext<'bar' | 'line'>) => {
+            if (
+              (context.parsed?.y ?? 0) < 0 &&
+              isBarChart &&
+              this.colorizeSign
+            ) {
+              return orange[5];
+            }
+
+            return `rgb(${benchmarkColorRgb.r}, ${benchmarkColorRgb.g}, ${benchmarkColorRgb.b})`;
+          },
           borderColor: `rgb(${benchmarkColorRgb.r}, ${benchmarkColorRgb.g}, ${benchmarkColorRgb.b})`,
           borderWidth: isBarChart ? 0 : 1,
           data: this.investments.map(({ date, investment }) => {