I want padding at the beginning of the X-axis as shown in the image below.
But padding doesn't work in my code.
What's the matter?
enter image description here
My Chart Screen
enter image description here
Chart.js Version 2.9.4
here is code
html
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
</div>
javascript
$('#myChart').remove();
$('.chart-container').append('<canvas id="myChart" style="height:400vh; width:500vw;"></canvas>');
let options = {
spanGaps: true,
responsive: true,
maintainAspectRatio : false,
scales: {
xAxes:[{
afterFit:(axis)=>{
// console.log(axis)
axis.paddingLeft = 25;
axis.paddingRight = 15;
},
// padding : 20,
ticks: {
fontSize: 15,
padding :20,
drawTicks:true,
offset: true,
// labelOffset: 70,
userCallback: function(value, index, values) {...},
},
gridLines:{
display: xLineState,
lineWidth: xLine,
// offsetGridLines: true
},
}],
yAxes: [{
afterFit:(axis)=>{
},
padding : 10,
ticks: {
// min:10,
fontSize: 15,
padding :15,
beginAtZero: true,
userCallback: function(value, index, values) {...}
},
gridLines:{
display: yLineState,
lineWidth: yLine
}
}],
},
scaleLabel: {
display: true,
labelString: 'Moola',
fontSize: 20,
},
tooltips: {
enabled: false,
mode: 'index',
position: 'nearest',
custom: customTooltips,
callbacks:
{
label:function (tooltipItem, data) {...},
footer:function (tooltipItems, data) {...}
}
},
legend:{
labels: {
fontSize: legendFontSize,
},
onClick:function (e,legendItem) {...}
}};
new Chart(ctx, config);
I want padding at the beginning of the X-axis as shown in the image below.
But padding doesn't work in my code.
What's the matter?
paddingLeft is not working..plz
question from:
https://stackoverflow.com/questions/65878718/paddingleft-of-afterfit-does-not-work-during-chart-js-option 
