Code:

```
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';
import { ExpenseService } from '../../service/expenseservice';
import { TotaldebitStatsByCategory } from '../../model/totaldebitstatsbycategory';

@Component({
  selector: 'app-totaldebitbarchart',
  standalone: true,
  imports: [
    CommonModule, RouterOutlet, CanvasJSAngularChartsModule
  ],
  providers: [ ExpenseService],
  templateUrl: './totaldebitbarchart.component.html',
  styleUrl: './totaldebitbarchart.component.css'
})
export class TotaldebitbarchartComponent implements OnInit {
  chartOptions: any = {};
  totalDebitStatsByCategory = new TotaldebitStatsByCategory();

  constructor(private expenseService: ExpenseService) {}

  ngOnInit() {
    this.expenseService.getTotalDebitStatsByCategory().subscribe(data => {
      this.totalDebitStatsByCategory = data;
      this.updateChartOptions();
    });
  }

  private updateChartOptions() {
    console.log(this.totalDebitStatsByCategory);
    console.log(this.totalDebitStatsByCategory.mapToArray());
    this.chartOptions = {
      title: {
        text: "Uitgave per categorie"
      },
      animationEnabled: true,
      axisY: {
        includeZero: true,
        suffix: "Euro"
      },
      data: [{
        type: "bar",
        indexLabel: "{y}",
        yValueFormatString: "#,### Euro",
        dataPoints: this.totalDebitStatsByCategory.mapToArray()
      }]
    };
  }
}
```

underneath my htlm code:

```
<div>
    <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart>
</div>
```
Underneath my class:

```
export class TotaldebitStatsByCategory {
    total: Map<string, BigInt>;

    constructor() {
        this.total = new Map<string, BigInt>();
    }

    mapToArray(): { label: string, y: number }[] {
        return Array.from(this.total.entries()).map(([label, y]) => ({ label, y: Number(y) }));
    }
}
```