How to visualize d3 nested data with Charts.js?


#1

I created a group like this with d3 js:

this.firebasedb.list("/fogasok/").subscribe(_data => {


      let sulySum = _data.reduce((sum, item) => sum + parseInt(item.suly), 0);
      let sulySumMap = _data.map((item, index) => {
        var n = new Date(item.datum);
        return {

          year: n.getFullYear(),
          month: n.getMonth() + 1,
          day: n.getDate(),
          weight: item.suly,
          fishtype: item.halfaj,
          food: item.etetoanyag1,
          bait: item.hasznaltcsali,
          location: item.helyszin
        }

      });
      var sulySumByDate = d3.nest()
        .key(function (d) {
          return d.year;
        })
        .key(function (d) {
          return d.month;
        })
        .key(function (d) {
          return d.day;
        })
        .key(function (d) {
          return d.fishtype;
        })
        .rollup(function (values) {
          return d3.sum(values, function (d) {
            return parseInt(d.weight);
          });
        })
        .map(sulySumMap)
      console.log("sulysum", sulySumByDate);

My problem is that i can see in the console log but how can i access the data?
My main problem i would like to create charts from it, but i have no idea how could i implement this to my code: (datasets and labels)

 this.barChart = new Chart(this.barCanvas.nativeElement, {
      
                 type: 'bar',
                 data: {
                     labels: [**?????????**],
                     datasets: [{
                         label: '# of Votes',
                         data: **????????????????**
                         backgroundColor: [
                             'rgba(255, 99, 132, 0.2)',
                             'rgba(54, 162, 235, 0.2)',
                             'rgba(255, 206, 86, 0.2)',
                             'rgba(75, 192, 192, 0.2)',
                             'rgba(153, 102, 255, 0.2)',
                             'rgba(255, 159, 64, 0.2)'
                         ],
                         borderColor: [
                             'rgba(255,99,132,1)',
                             'rgba(54, 162, 235, 1)',
                             'rgba(255, 206, 86, 1)',
                             'rgba(75, 192, 192, 1)',
                             'rgba(153, 102, 255, 1)',
                             'rgba(255, 159, 64, 1)'
                         ],
                         borderWidth: 1
                     }]
                 },
                 options: {
                     scales: {
                         yAxes: [{
                             ticks: {
                                 beginAtZero:true
                             }
                         }]
                     }
                 }
      
             });
  }