Chartjs-Can't load multiple charts onto a page when looping through dummy array

by

0👍

Ok after a while of trying different things out, this seems to work for me. 

ngAfterViewInit() {
    this.loadCharts();
  }

      loadCharts() {
        _.each(this.games, (game, i) => {
          this.chart = new Chart(game.id, {
            type: 'doughnut',
          data: {
            labels: [game.homeTeam, game.awayTeam],
            datasets: [
              {
                label: "Population (millions)",
                backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
                data: [2478,5267,734,784,433]
              }
            ]
          },
          options: {
            title: {
              display: true,
              text: 'Predicted world population (millions) in 2050'
            }
          }
          });
        });
      }

Basically it’s waiting for the view to be initialized and then it assigns the charts to the cards that I have created.

Leave a comment