diff --git a/src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.ts b/src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.ts index 62c3a76a7..7ecc4e1ec 100644 --- a/src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.ts +++ b/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 }] }, diff --git a/src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.ts b/src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.ts index 4f84b782e..d0a7e1195 100644 --- a/src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.ts +++ b/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 }] }, diff --git a/src/app/home/dashboard/client-trends-bar/client-trends-bar.component.ts b/src/app/home/dashboard/client-trends-bar/client-trends-bar.component.ts index 20e870385..7cb5aded8 100644 --- a/src/app/home/dashboard/client-trends-bar/client-trends-bar.component.ts +++ b/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: { - padding: { - top: 5, - left: 10, - right: 10 - } - } + responsive: true, + scales: { + y: { + beginAtZero: true, + scaleLabel: { + display: true, + labelString: 'Values', + fontColor: '#1074B9' + } + }, + } } }); } else {