fixed view of charts to show currency where relevant

src/app/panels/pie-panel.component.html

@@ -1,7 +1,7 @@
 <div class="card">
   <div class="card-block">
     <div class="row">
-      <div class="col-sm-8">
+      <div class="col-12">
         <h4 class="card-title mb-0">All Purchases</h4>
       </div>
     </div>
@@ -16,17 +16,18 @@
     </div>
   </div>
 </div>
-<div class="card">
+<div *ngIf="showCategoryDoughnutChart" class="card">
   <div class="card-block">
     <div class="row">
-      <div class="col-sm-8">
-        <h4 class="card-title mb-0">Weekly Spend</h4>
+      <div class="col-12">
+        <h4 class="card-title mb-0">Weekly Spending by Category</h4>
       </div>
     </div>
     <div class="chart-wrapper">
       <canvas baseChart class="chart"
-      [data]="doughnutChartDataCategory"
+      [datasets]="doughnutChartDataCategory"
       [labels]="doughnutChartLabelsCategory"
+      [options]="doughtnutChartOptionsCategory"
       [legend]="chartLegend"
       [chartType]="chartType"
       (chartHover)="chartHovered($event)"
@@ -37,8 +38,8 @@
 <div *ngIf="showEssentialBarChart" class="card">
   <div class="card-block">
     <div class="row">
-      <div class="col-sm-8">
-        <h4 class="card-title mb-0">Essential Purchases</h4>
+      <div class="col-12">
+        <h4 class="card-title mb-0">No. of Essential Purchases</h4>
       </div>
     </div>
     <div class="chart-wrapper">
@@ -55,8 +56,8 @@
 <div *ngIf="showCategoryBarChart" class="card">
   <div class="card-block">
     <div class="row">
-      <div class="col-sm-8">
-        <h4 class="card-title mb-0">Month Purchases by Category</h4>
+      <div class="col-12">
+        <h4 class="card-title mb-0">Monthly Spending by Category</h4>
       </div>
     </div>
     <div class="chart-wrapper">