enable chart canvas responsiveness

src/app/charts/donut-chart/donut-chart.component.html

@@ -1,4 +1,4 @@
-<div class="chart-container">
-    <canvas id={{elementID}} width="100%" height="100%"></canvas>
+<div class="chart-container" fxLayout="column" fxLayoutAlign="space-around">
+    <canvas id={{elementID}} width="100px" height="100px"></canvas>
     <div class="center">{{count}}</div>
 </div>

src/app/charts/donut-chart/donut-chart.component.scss

@@ -1,6 +1,8 @@
 .chart-container {
     position: relative;
-  }
+    width: 100%;
+    height: 100%;
+ }
 
 .center {
     position: absolute;
@@ -8,5 +10,5 @@
     top: 40%;
     width: 100%;
     text-align: center;
-    font-size: 18px;
+    font-size:1.8rem;
 }

src/app/charts/donut-chart/donut-chart.component.ts

@@ -49,8 +49,8 @@ export class DonutChartComponent {
         }]
       },
       options: {
-        cutoutPercentage: 70,
-        responsive: false,
+        cutoutPercentage: 75,
+        responsive: true,
         legend: {
           display: false
         },
@@ -62,4 +62,4 @@ export class DonutChartComponent {
       }
     });
   }
-}
+}