Bugfix/fix chart on landing page (#219)

* Fix chart on landing page

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Fixed
+
+- Fixed the chart on the landing page
+
 ## 1.26.0 - 17.07.2021
 
 ### Added

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

@@ -2,6 +2,7 @@ import 'chartjs-adapter-date-fns';
 
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   Input,
   OnChanges,
@@ -44,7 +45,7 @@ export class LineChartComponent implements OnChanges, OnDestroy, OnInit {
   public chart: Chart;
   public isLoading = true;
 
-  public constructor() {
+  public constructor(private changeDetectorRef: ChangeDetectorRef) {
     Chart.register(
       Filler,
       LineController,
@@ -59,7 +60,12 @@ export class LineChartComponent implements OnChanges, OnDestroy, OnInit {
 
   public ngOnChanges() {
     if (this.historicalDataItems) {
-      this.initialize();
+      setTimeout(() => {
+        // Wait for the chartCanvas
+        this.initialize();
+
+        this.changeDetectorRef.markForCheck();
+      });
     }
   }
 
@@ -79,8 +85,6 @@ export class LineChartComponent implements OnChanges, OnDestroy, OnInit {
       marketPrices.push(historicalDataItem.value);
     });
 
-    const canvas = document.getElementById('chartCanvas');
-
     const gradient = this.chartCanvas?.nativeElement
       ?.getContext('2d')
       .createLinearGradient(
@@ -89,11 +93,14 @@ export class LineChartComponent implements OnChanges, OnDestroy, OnInit {
         0,
         (this.chartCanvas.nativeElement.parentNode.offsetHeight * 4) / 5
       );
-    gradient.addColorStop(
+
-      0,
+    if (gradient) {
-      `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.01)`
+      gradient.addColorStop(
-    );
+        0,
-    gradient.addColorStop(1, getBackgroundColor());
+        `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.01)`
+      );
+      gradient.addColorStop(1, getBackgroundColor());
+    }
 
     const data = {
       labels,