ng2 chart vertical bars not aligning

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

These are my Typescript 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:

<div class="graph-card">
<h3>Expense Trends</h3>
<canvas
baseChart
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[datasets]="barChartData"
[type]="barChartType"
[plugins]="barChartPlugins"
></canvas>
</div>


This is the way my chart looks right now:



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

Continue reading...