Currently, I am working with Angular 12 and the latest version of Chart.js for my project. I am attempting to create a bar chart with a smaller width by using barPercentage: 0.4, but it seems like this code is not being applied correctly. Does anyone have a solution for this issue?
Below is the code snippet:
var myChart = new Chart('myChart', {
type: 'bar',
data: {
labels: this.labels,
datasets: [
{
data: this.data,
backgroundColor: [' rgba(148, 180, 214,0.4)', 'rgba(239, 83, 80,0.4)', 'rgba(102, 187, 106,0.4)'],
borderColor: [' #93b3d6', '#ef5350', '#66bb6a'],borderWidth: 1
},
],
},
options: {
plugins: {
legend: {
display: false,
},
},
responsive: true,
maintainAspectRatio: true,
datasets: {
bar: {
categoryPercentage: 0.95
}
},
scales: {
y: {
title: {
display: true,
text: 'Count',
},
},
x: {
title: {
display: false,
text: 'Total Count',
},
},
},
},
});
Thank you!