Take advantage of Chartjs new update function

src/app/home/home.component.ts

@@ -48,7 +48,9 @@ export class HomeComponent implements OnInit {
     this.keys = temp; // invoke update in rb-multiselect
     this.initChart();
 
-    this.calcFieldSelectKeys();
+    // only neccesary if keys get preselected
+    //this.calcFieldSelectKeys();
+
     // fetch all samples populated with according group
     this.getSamples();
   }
@@ -77,8 +79,7 @@ export class HomeComponent implements OnInit {
         }
       });
     }
-    this.myChart.destroy();
+    const datasets = this.updateGraph();
-    this.initChart();
   }
 
   // preset select
@@ -99,7 +100,7 @@ export class HomeComponent implements OnInit {
   }
 
   // get data for graph based on active keys
-  async getData() {
+  updateGraph() {
     let nameList: string[] = [];
     let dataList: number[] = [];
 
@@ -109,20 +110,20 @@ export class HomeComponent implements OnInit {
         dataList.push(key.count);
       }
     })
-    return { names: nameList, count: dataList };
+    this.myChart.data.labels = nameList;
+    this.myChart.data.datasets[0].data = dataList;
+    this.myChart.update();
   }
 
   // draw graph
   async initChart() {
-    const data = await this.getData();
-
     this.myChart = new Chart("myChart", {
       type: 'bar',
       data: {
-        labels: data.names,
+        labels: [],
         datasets: [{
           label: 'Number of samples per group',
-          data: data.count,
+          data: [],
           backgroundColor: 'rgba(0, 86, 145, 1)',
           pointRadius: 4,
           pointHoverRadius: 7