add some style to dashboard

src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.ts

@@ -78,11 +78,11 @@ export class AmountCollectedPieComponent implements OnInit {
   setChart(data: any) {
     if (!this.chart) {
       this.chart = new Chart('collection-pie', {
-        type: 'pie',
+        type: 'doughnut',
         data: {
           labels: ['Pending', 'Collected'],
           datasets: [{
-            backgroundColor: ['red', 'green'],
+            backgroundColor: ['dodgerblue', 'red'],
             data: data
           }]
         },

src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.ts

@@ -78,11 +78,11 @@ export class AmountDisbursedPieComponent implements OnInit {
   setChart(data: any) {
     if (!this.chart) {
       this.chart = new Chart('disbursement-pie', {
-        type: 'pie',
+        type: 'doughnut',
         data: {
           labels: ['Pending', 'Disbursed'],
           datasets: [{
-            backgroundColor: ['red', 'yellow'],
+            backgroundColor: ['dodgerblue', 'red'],
             data: data
           }]
         },

src/app/home/dashboard/client-trends-bar/client-trends-bar.component.ts

@@ -4,15 +4,15 @@ import { UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
 /** rxjs Imports */
-import { merge, forkJoin } from 'rxjs';
+import { forkJoin, merge } from 'rxjs';
 import { skip } from 'rxjs/operators';
 
 /** Custom Services */
 import { HomeService } from '../../home.service';
 
 /** Charting Imports */
-import Chart from 'chart.js';
 import { Dates } from 'app/core/utils/dates';
+import Chart from 'chart.js';
 
 /**
  * Client Trends Bar Chart Component.
@@ -218,30 +218,40 @@ export class ClientTrendsBarComponent implements OnInit {
   setChart(labels: any[], clientCounts: number[], loanCounts: number[]) {
     if (!this.chart) {
       this.chart = new Chart('client-trends-bar', {
-        type: 'bar',
+        type: 'line',
         data: {
           labels: labels,
           datasets: [
             {
               label: 'New Clients',
+              data: clientCounts,
               backgroundColor: 'dodgerblue',
-              data: clientCounts
+              borderColor: 'dodgerblue',
+              borderWidth: 2,
+              fill: false
             },
             {
               label: 'Loans Disbursed',
-              backgroundColor: 'green',
+              data: loanCounts,
-              data: loanCounts
+              backgroundColor: 'red',
+              borderColor: 'red',
+              borderWidth: 2,
+              fill: false,
             }
           ]
         },
         options: {
-          layout: {
+          responsive: true,
-            padding: {
+                scales: {
-              top: 5,
+                    y: {
-              left: 10,
+                        beginAtZero: true,
-              right: 10
+                        scaleLabel: {
-            }
+                            display: true,
-          }
+                            labelString: 'Values',
+                            fontColor: '#1074B9'
+                        }
+                    },
+                }
         }
       });
     } else {