The chart.js/ng2-charts is not displaying the data given - html

Question

I've developed a website in Angular 14 that treat about cryptocurrencies using the CoinGecko API.
I wanted to display a chart for every cryptocurrency on a specific page using chart.js and ng2-charts.
I've parsed the data sent by the API and used it in my chart but it is not showing the line chart expected.
Here is a service that is getting the data from the API and parse it:
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import {map, Observable, Subscription } from 'rxjs';
#Injectable({
providedIn: 'root',
})
export class SingleCryptoGraphService {
subscription: Subscription;
doubletab: any = {
date : Array<string>(),
price: Array<number>(),
};
constructor(private httpClient: HttpClient) {
this.subscription = Subscription.EMPTY;
}
HistoricalChart(id: string, currency: string, days: number): Observable<any> {
return this.httpClient
.get<any[]>(
'https://api.coingecko.com/api/v3/coins/'+id+'/market_chart?vs_currency='+currency+'&days='+days+'&interval=daily').pipe(
map( (obj: any) => obj['prices']),
map((tab: any[]) => {
const res = [];
for (let i = 0; i < tab.length; i++) {
this.doubletab.date.push(this.getDate(tab[i][0]));
this.doubletab.price.push(this.convertToNumber(tab[i][1]));
}
console.log(this.doubletab);
return this.doubletab;
}
)
);
}
getDate = (date: number) : string => {
let d = new Date(date)
let day = d.getDate()
let month = d.getMonth() + 1
let year = d.getFullYear()
return day + "/" + month + "/" + year
}
convertToNumber = (str: string) : number => {
return Number(str)
}
}
Here is the chart component TypeScript:
import { Component, OnDestroy, OnInit, Input, ViewChild } from '#angular/core';
import { SingleCryptoGraphService } from '../single-crypto-graph.service';
import { Subscription } from 'rxjs';
import { Chart, ChartConfiguration, ChartEvent, ChartType } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';
#Component({
selector: 'app-crypto-graph',
templateUrl: './crypto-graph.component.html',
styleUrls: ['./crypto-graph.component.css']
})
export class CryptoGraphComponent implements OnInit, OnDestroy {
subscription3: Subscription
chartInfoTabs: any = {
date: Array<string>(),
price: Array<number>(),
}
#Input() id = ''
constructor(private SingleCryptoGraphService:SingleCryptoGraphService) {
this.subscription3 = Subscription.EMPTY;
this.id = "none";
}
ngOnInit(): void {
this.subscription3.unsubscribe()
this.subscription3 = this.SingleCryptoGraphService.HistoricalChart(this.id,"eur",30).subscribe(
(data) => {
this.chartInfoTabs.date = data.date;
this.chartInfoTabs.price = data.price;
}
);
}
ngOnDestroy() {
this.subscription3.unsubscribe()
}
public lineChartData: ChartConfiguration['data'] = {
datasets: [{
data: this.chartInfoTabs.price,
label: this.id,
backgroundColor: 'rgba(148,159,177,0.2)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)',
fill: 'origin',
}],
labels: this.chartInfoTabs.date,
}
public lineChartOptions: ChartConfiguration['options'] = {
elements: {
line: {
tension: 0.5
}
},
scales: {
y:
{
position: 'left',
},
},
};
public lineChartType: ChartType = 'line';
#ViewChild(BaseChartDirective) chart?: BaseChartDirective;
}
And here is the canvas used to display the chart and the result I got:
<canvas baseChart class="chart"
[data]="lineChartData"
[options]="lineChartOptions"
[type]="lineChartType"
(chartHover)="chartHovered($event)">
</canvas>
What's actually shown by my code
I suspect my tables of data implement the wrong type but I can't figure out why because they seem to be right.
I would really appreciate help with this problem because I really don't understand why it is not working.