diff --git a/nise-frontend/src/corelib/components/chart/chart.component.html b/nise-frontend/src/corelib/components/chart/chart.component.html
index 4f997a9..90a9868 100644
--- a/nise-frontend/src/corelib/components/chart/chart.component.html
+++ b/nise-frontend/src/corelib/components/chart/chart.component.html
@@ -5,7 +5,7 @@
-
diff --git a/nise-frontend/src/corelib/components/chart/chart.component.ts b/nise-frontend/src/corelib/components/chart/chart.component.ts
index 28b1d1a..113f7cf 100644
--- a/nise-frontend/src/corelib/components/chart/chart.component.ts
+++ b/nise-frontend/src/corelib/components/chart/chart.component.ts
@@ -17,21 +17,27 @@ import {FormsModule} from "@angular/forms";
styleUrl: './chart.component.css',
changeDetection: ChangeDetectionStrategy.OnPush
})
-export class ChartComponent {
+export class ChartComponent implements OnChanges {
- public barChartOptions: ChartConfiguration<'bar'>['options'] = {
- responsive: true,
- //@ts-ignore
- animations: false,
- scales: {
- x: {
- stacked: true,
- },
- y: {
- stacked: true
+ barChartOptions: ChartConfiguration<'bar'>['options'];
+
+ ngOnChanges() {
+ const showPercentages = this.showPercentages;
+ this.barChartOptions = {
+ responsive: true,
+ //@ts-ignore
+ animations: false,
+ scales: {
+ y: {
+ ticks: {
+ callback: function(value, index, ticks) {
+ return showPercentages ? value + '%' : value;
+ }
+ }
+ }
}
- }
- };
+ };
+ }
@Input() title!: string;
@Input() data!: number[];
@@ -108,7 +114,7 @@ export class ChartComponent {
data: dataPoints.map(({ count }) => this.showPercentages ? (count / total * 100) : count),
label: this.showPercentages ? this.title + " (%)": this.title,
backgroundColor: 'rgba(0,255,41,0.66)',
- borderRadius: 5
+ borderRadius: 5,
}];
return { labels, datasets };