I am creating an Angular app and I cant align my vertical chart bars with the labels below the ox axis.

These are my ts. methods responsible for the chart:

prepareChartData(expenses: ExpenseStatistic[]) {
  const uniqueCategories = [...new Set(expenses.map(expense => expense.categoryName))];
  
  this.barChartLabels = uniqueCategories;

  const colors = this.generateColors(uniqueCategories.length);

  this.barChartData = uniqueCategories.map((category, index) => {
    const categoryData = expenses
      .filter(expense => expense.categoryName === category)
      .map(expense => expense.value ?? 0); 

    return {
      data: categoryData,
      label: category ?? 'Unknown', 
      backgroundColor: colors[index] 
    };        
  });
}`

public barChartData: ChartDataset[] = [
{ data: [],
stack: ‘a’,
label: ‘Total Expenses’,
borderWidth: 1,
barPercentage: 0.7,
categoryPercentage: 0.9
}
];
public barChartOptions: ChartOptions = {
responsive: true,
scales: {
x: {
type: ‘category’, // Ensure this is set
grid: {

          display:false
        }
      },
      y: {
        beginAtZero: true,
      }
    },
  };

This is my HTML code for the chart:

`

Expense Trends

<canvas
baseChart
[labels]=”barChartLabels”
[options]=”barChartOptions”
[legend]=”barChartLegend”
[datasets]=”barChartData”
[type]=”barChartType”
[plugins]=”barChartPlugins”
>

I have tried to adjust the x axis properties. I am expecting the bars to be above the labels.

This is the way my chart looks right now:
https://i.sstatic.net/oD7yVbA4.png