chart js showing different width of bar - vue.js

Question

I am creating simple bar chart using Chartjs in Vue
<bar-chart
:data="[40, 19, 3, 5,]"
:labels="['0-30 days', '31-60 days', '61-90 days', '90+']"
:colors="['blue', 'blue', 'blue', 'blue']"
></bar-chart>
and the code for this is
createChart(chartData: object) {
const canvas = document.getElementById('bar') as HTMLCanvasElement;
const myopt = {
deferred: {
xOffset: '50%',
delay: 250,
},
plugins: {
datalabels: {
align: 'top',
anchor: 'end',
color: 'blue',
},
},
legend: {
display: true,
},
title: {
display: true,
text: 'Chart.js - Different Bar Colors',
},
tooltips: { enabled: true },
responsive: true,
hover: { mode: null },
elements: {
point: {
radius: 0,
},
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: '',
},
offset: false,
color: 'rgba(0, 0, 0, 0)',
gridLines: {
drawOnChartArea: false,
},
}],
yAxes: [{
id: 'y-axis-0',
mirror: false,
stacked: true,
offset: false,
callback(label:any, index:any, labels:[]) {
return `${label}%`;
},
ticks: {
beginAtZero: true,
min: 0,
},
gridLines: {
display: true,
color: 'rgba(0, 0, 0, 0)',
drawOnChartArea: false,
},
}],
},
};
const options = {
type: 'bar',
data: chartData,
options: myopt,
};
new Chart(canvas, options);
}
the chart which this is generating is not equidistant sharing image for reference
position and width of the bar is incorrect and also I want to know if there is any way by which i can customize labels for y axis e.g. instead of 40,35,30... it will be ** 40k,35k,30k** in y axis
If any one has worked on this case please help

Answer 1

You can make use of the tick callback for your K at the end (https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats)
var ctx2 = document.getElementById("stack-chart");
var stackChart1 = new Chart(ctx2, {
type: 'bar',
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: (val) => (val + 'k')
}
}]
},
legend: {
display: false,
labels: {
fontSize: 20,
fontColor: '#595d6e',
}
},
tooltips: {
enabled: false
}
},
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
backgroundColor: "#5e63b4",
data: [20, 30, 40, 50, 60]
}]
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="stack-chart" width="1360" height="450"></canvas>