How to connect Firebase in Chart.js?

I’m using Ionic and I have a CRUD that creates a list of name “Item”:


export interface Item {
    key?: string;
    data: string;
    humor: string;
    mania: string;
    numero: string;
    medicamento?: string;
    dormidas?: string;
    menstrual?: boolean;
    evento?: string;
    impacto?: number;
    outras?:  string;


See how the data is stored in firebase:

So, how to connect the list data created in my chart done in Chart.js?
I can create a static graph only, I would like the graphic to be dynamic and with the data stored in Firebase. On the X axis I want to put the variable “data” and on the Y axis the variable “numero”.


<div class="row">
    <div class="col-md-6">
      <div style="display: block;">
      <canvas baseChart width="600" height="400"


import { Item } from '../../models/item/item.models';

public lineChartData:Array<any> = [
  {data: [-34, -78, 45, 65], label: 'Humor'}

  public lineChartLabels:Array<any> = ['19/jun', '20/jun', '21/jun', '22/jun' ];

public lineChartColors:Array<any> = [
  { // grey
    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)'
public lineChartLegend:boolean = true;
public lineChartType:string = 'line';


Could someone please help me connect Firebase to my chart?
I have not found any material on the subject. If possible, I would like to see a practical example.

1 Like