changed graph type to bar and color to bosch dark blue

src/app/home/home.component.ts

@@ -53,16 +53,16 @@ export class HomeComponent implements OnInit {
     this.getSamples();
   }
 
-  getSamples(){
+  getSamples() {
     let query = '/samples?status%5B%5D=validated&status=new&filters%5B%5D=%7B%22mode%22%3A%22in%22%2C%22field%22%3A%22material.group%22%2C%22values%22%3A%5B';
     let temp = '';
-    this.keys.forEach(key =>{
-      temp += key.active ? '%22' + key.id.split("%").join("%25") + '%22%2C': ""; // replace split().join() with replaceAll() 
+    this.keys.forEach(key => {
+      temp += key.active ? '%22' + key.id.split("%").join("%25") + '%22%2C' : ""; // replace split().join() with replaceAll() 
     });
-    if (temp === ''){
+    if (temp === '') {
       this.countSamples('');
-    }else{
-      query = query + temp.substr(0, temp.length-3) + '%5D%7D&fields%5B%5D=material.group'; 
+    } else {
+      query = query + temp.substr(0, temp.length - 3) + '%5D%7D&fields%5B%5D=material.group';
       this.fetchData(query, data => this.countSamples(data));
     }
   }
@@ -116,38 +116,27 @@ export class HomeComponent implements OnInit {
   async initChart() {
     const data = await this.getData();
 
-    const canvas = document.getElementById('myChart') as HTMLCanvasElement;
-    const width = canvas.clientWidth;
-    const height = canvas.clientHeight;
-    const ctx = canvas.getContext('2d');
-
-    var img = new Image(width, height);
-    img.src = "/assets/imgs/supergraphic.svg";
-    img.onload = () => {
-      const fillPattern = ctx.createPattern(img, 'no-repeat');
-
-      this.myChart = new Chart("myChart", {
-        type: 'line',
-        data: {
-          labels: data.names,
-          datasets: [{
-            label: 'Number of samples per group',
-            data: data.count,
-            backgroundColor: fillPattern,
-            pointRadius: 4,
-            pointHoverRadius: 7
+    this.myChart = new Chart("myChart", {
+      type: 'bar',
+      data: {
+        labels: data.names,
+        datasets: [{
+          label: 'Number of samples per group',
+          data: data.count,
+          backgroundColor: 'rgba(0, 86, 145, 1)',
+          pointRadius: 4,
+          pointHoverRadius: 7
+        }]
+      },
+      options: {
+        scales: {
+          yAxes: [{
+            ticks: {
+              beginAtZero: true
+            }
           }]
-        },
-        options: {
-          scales: {
-            yAxes: [{
-              ticks: {
-                beginAtZero: true
-              }
-            }]
-          }
         }
-      });
-    }
+      }
+    });
   }
 }