diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c7342f87..f27c206cd 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/apps/client/src/app/components/line-chart/line-chart.component.ts b/apps/client/src/app/components/line-chart/line-chart.component.ts index e5f5fbe45..7b773020c 100644 --- a/apps/client/src/app/components/line-chart/line-chart.component.ts +++ b/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, - `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.01)` - ); - gradient.addColorStop(1, getBackgroundColor()); + + if (gradient) { + gradient.addColorStop( + 0, + `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.01)` + ); + gradient.addColorStop(1, getBackgroundColor()); + } const data = { labels,