Chartjs-How to Push data dynamically from firebase to bar graph in angular

by

0👍

✅

You have to create a config variable like this:

public config = {
    type: 'bar',
    legend: true,
    data: {
      labels: [ "incoming" , "missed" , "outgoing"],
      datasets: [{
        label: 'calls',
        data: []
      }]
    }
  }

In your html file, put this:

<div style="display: block">
   <canvas id="canvas" style="display: block"></canvas>
</div>

In the ngOnInit() function do this (variables ctx and myBarChart must be defined earlier):

this.ctx = document.getElementById('canvas') as HTMLCanvasElement
this.myBarChart = new Chart(this.ctx.getContext('2d'), this.config)

When you want to update the data, you can do it this way:

this.myBarChart.data.datasets[0].data = your_firebase_data;
this.myBarChart.update()

Cheers

Leave a comment