Bugfix/color scheme of investment chart (#7972)

* Fix color scheme of investment chart component

* Update changelog

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Fixed the colors of the investment chart component (dark mode)
 - Fixed the value column of the top holdings on the allocations page in the _Presenter View_
 - Fixed the projected sustainable retirement income on the _FIRE_ page for a projected total amount of zero (experimental)
 - Fixed the emergency fund in the portfolio summary for redacted values

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html

@@ -23,6 +23,7 @@
     <div class="chart-container mb-3">
       <gf-investment-chart
         class="h-100"
+        [colorScheme]="user?.settings?.colorScheme"
         [currency]="user?.settings?.baseCurrency"
         [historicalDataItems]="historicalDataItems"
         [isInPercentage]="showValuesInPercentage()"

apps/client/src/app/components/investment-chart/investment-chart.component.ts

@@ -7,7 +7,11 @@ import {
   getZeroLineAnnotation,
   transformTickToAbbreviation
 } from '@ghostfolio/common/chart-helper';
-import { primaryColorRgb, secondaryColorRgb } from '@ghostfolio/common/config';
+import {
+  DEFAULT_COLOR_SCHEME,
+  primaryColorRgb,
+  secondaryColorRgb
+} from '@ghostfolio/common/config';
 import { getLocale, parseDate } from '@ghostfolio/common/helper';
 import { LineChartItem } from '@ghostfolio/common/interfaces';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
@@ -55,7 +59,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
   @Input() public benchmarkDataItems: InvestmentItem[] = [];
   @Input() public benchmarkDataLabel = '';
-  @Input() public colorScheme: ColorScheme;
+  @Input() public colorScheme?: ColorScheme;
   @Input() public currency?: string;
   @Input() public groupBy: GroupBy;
   @Input() public historicalDataItems: LineChartItem[] = [];
@@ -170,13 +174,15 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
 
         this.chart.update();
       } else {
+        const colorScheme = this.colorScheme ?? DEFAULT_COLOR_SCHEME;
+
         this.chart = new Chart<'bar' | 'line'>(
           this.chartCanvas().nativeElement,
           {
             data: chartData,
             options: {
               animation: false,
-              elements: getChartElementsOptions(this.colorScheme),
+              elements: getChartElementsOptions(colorScheme),
               interaction: { intersect: false, mode: 'index' },
               maintainAspectRatio: true,
               plugins: {
@@ -204,7 +210,7 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
                           value: this.savingsRate
                         }
                       : undefined,
-                    yAxis: getZeroLineAnnotation(this.colorScheme)
+                    yAxis: getZeroLineAnnotation(colorScheme)
                   }
                 },
                 legend: {
@@ -212,18 +218,18 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
                 },
                 tooltip: this.getTooltipPluginConfiguration(),
                 verticalHoverLine: {
-                  color: getChartBorderColor(this.colorScheme)
+                  color: getChartBorderColor(colorScheme)
                 }
               },
               responsive: true,
               scales: {
                 x: getTimeAxisOptions({
+                  colorScheme,
                   borderWidth: this.groupBy ? 0 : 1,
-                  colorScheme: this.colorScheme,
                   locale: this.locale
                 }),
                 y: getValueAxisOptions({
-                  colorScheme: this.colorScheme,
+                  colorScheme,
                   display: !this.isInPercentage,
                   tickCallback: (tickValue) => {
                     return transformTickToAbbreviation(Number(tickValue));
@@ -232,7 +238,7 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
               }
             },
             plugins: [
-              getVerticalHoverLinePlugin(this.chartCanvas(), this.colorScheme)
+              getVerticalHoverLinePlugin(this.chartCanvas(), colorScheme)
             ],
             type: this.groupBy ? 'bar' : 'line'
           }
@@ -245,7 +251,7 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
     TooltipOptions<'bar' | 'line'>
   > {
     return getTimeSeriesTooltipOptions<'bar' | 'line'>({
-      colorScheme: this.colorScheme,
+      colorScheme: this.colorScheme ?? DEFAULT_COLOR_SCHEME,
       currency: this.isInPercentage ? undefined : this.currency,
       groupBy: this.groupBy,
       locale: this.isInPercentage ? undefined : this.locale,

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

@@ -443,6 +443,7 @@
           class="h-100"
           [benchmarkDataItems]="investments"
           [benchmarkDataLabel]="portfolioEvolutionDataLabel"
+          [colorScheme]="user?.settings?.colorScheme"
           [currency]="user?.settings?.baseCurrency"
           [historicalDataItems]="performanceDataItems"
           [isInPercentage]="showValuesInPercentage()"
@@ -499,6 +500,7 @@
           class="h-100"
           [benchmarkDataItems]="investmentsByGroup"
           [benchmarkDataLabel]="investmentTimelineDataLabel"
+          [colorScheme]="user?.settings?.colorScheme"
           [currency]="user?.settings?.baseCurrency"
           [groupBy]="mode()"
           [isInPercentage]="showValuesInPercentage()"
@@ -534,6 +536,7 @@
           class="h-100"
           [benchmarkDataItems]="dividendsByGroup"
           [benchmarkDataLabel]="dividendTimelineDataLabel"
+          [colorScheme]="user?.settings?.colorScheme"
           [currency]="user?.settings?.baseCurrency"
           [groupBy]="mode()"
           [isInPercentage]="showValuesInPercentage()"