I'm currently working on generating a graph using Firestore data and ng2charts. However, when I run my code, I encounter the following errors:
Property 'data' does not exist on type 'unknown', causing an error in item.data
Similarly, property 'datatime' does not exist on type 'unknown', leading to an error in item.datatime
How can I resolve these issues?
Here is the component code I am using:
labelsdatatimeArray: any = [];
dataArray: any = [];
@ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;
constructor(public navCtrl: NavController, private firestore: AngularFirestore) { }
ngOnInit() {
this.firestore.collection('/ELGeneraciónEmpleosFormalesDiciembreCadaAño/').get().toPromise().then((snapshot) => {
snapshot.docs.forEach(doc => {
let item = doc.data();
let data = item.data;
this.dataArray.push(data);
let datatime = item.datatime;
this.labelsdatatimeArray.push(datatime);
});
});
}
public barChartOptions: ChartConfiguration['options'] = {
responsive: true,
scales: {
x: { ticks: {
stepSize: 1,
maxRotation: 60,
minRotation: 60,
autoSkip: false
}},
y: {
min: -40
}
},
plugins: {
legend: {
display: true,
},
datalabels: {
anchor: 'end',
align: 'end'
}
}
};
public barChartType: ChartType = 'bar';
public barChartPlugins = [
DataLabelsPlugin
];
public barChartData: ChartData<'bar'> = {
labels: [this.labelsdatatimeArray],
datasets: [
{ data: [this.dataArray],
label: '' },
]
};
// events
public chartClicked({ event, active }: { event?: ChartEvent, active?: {}[] }): void {
console.log(event, active);
}
public chartHovered({ event, active }: { event?: ChartEvent, active?: {}[] }): void {
console.log(event, active);
}