Chart.js padding not working for ScaleLabel - chart.js

Question

On this jsfiddle https://jsfiddle.net/rvbrr0Lu/30/. The 'g' char in the ScaleLabel for the x-axis is cut off. I tried adding some padding to the ScaleLabel, but it seemed to have no effect. What should I do so the 'g' on the x-axis is not cut off?
Here is my js code.
var canvas = document.getElementById('myChart');
var raw = [
{start: '0', end: '10', data: [{}]},
{start: '10', end: '20', data: [{},{},{}]},
{start: '20', end: '30', data: [{},{}]},
{start: '30', end: '40', data: [{},{},{},{}]},
{start: '40', end: '50', data: [{},{},{},{},{}]},
{start: '50', end: '60', data: [{},{},{},{},{},{}]},
];
var data = {
labels: raw.map((r) => '$' + r.start).concat('$' + raw[raw.length - 1].end),
datasets: [
{
backgroundColor: ["red","orange","yellowgreen","green","violet", "rebeccapurple"],
data: raw.map((r) => r.data.length*(1.73 * Math.random())),
}
]
};
function getYTicks() { return [0, 10]};
function formatz(v) { return 'E' + v; };
function formatY(v) { return '$' + v + '.00'; };
var option = {
legend: {
display: false,
},
layout: {
padding: {
left: 5,
top: 5,
right: 5,
bottom: 5,
},
},
scales: {
yAxes:[{
scaleLabel: {
display: true,
labelString: 'Y',
fontFamily: 'Lato',
fontSize: 14,
},
ticks: {
beginAtZero: true,
padding: 10,
fontFamily: 'Lato',
fontSize: 14,
},
afterBuildTicks: getYTicks(),
gridLines: {
display: true,
color: 'rgba(50,50,50,0.2)',
zeroLineColor: 'rgba(50,50,50,0.5)',
zeroLineWidth: 2,
drawTicks: true,
tickMarkLength: 4,
},
}],
xAxes:[{
barPercentage: 0.8,
categoryPercentage: 1,
gridLines: {
display: false,
tickMarkLength: 10,
color: 'rgba(50,50,50,0.1)',
drawTicks: false,
offsetGridLines: false,
zeroLineColor: 'rgba(50,50,250,0.5)',
zeroLineWidth: 5,
},
scaleLabel: {
display: true,
labelString: 'Pages',
padding: 300,
fontFamily: 'Lato',
fontSize: 14,
},
ticks: {
beginAtZero: true,
callback: formatz,
fontFamily: 'Lato',
fontSize: 14,
},
}]
}
};
var myBarChart = Chart.Bar(canvas,{
data:data,
options:option
});

Answer 1

Use the latest version of Chart.js (2.7.1):
var canvas = document.getElementById('myChart');
var raw = [
{start: '0', end: '10', data: [{}]},
{start: '10', end: '20', data: [{},{},{}]},
{start: '20', end: '30', data: [{},{}]},
{start: '30', end: '40', data: [{},{},{},{}]},
{start: '40', end: '50', data: [{},{},{},{},{}]},
{start: '50', end: '60', data: [{},{},{},{},{},{}]},
];
var data = {
labels: raw.map((r) => '$' + r.start).concat('$' + raw[raw.length - 1].end),
datasets: [
{
backgroundColor: ["red","orange","yellowgreen","green","violet", "rebeccapurple"],
data: raw.map((r) => r.data.length*(1.73 * Math.random())),
}
]
};
function getYTicks() { return [0, 10]};
function formatz(v) { return 'E' + v; };
function formatY(v) { return '$' + v + '.00'; };
var option = {
legend: {
display: false,
},
layout: {
padding: {
left: 10,
top: 10,
right: 10,
bottom: 10,
},
},
scales: {
yAxes:[{
scaleLabel: {
display: true,
labelString: 'Y',
fontFamily: 'Lato',
fontSize: 14,
},
ticks: {
beginAtZero: true,
padding: 10,
fontFamily: 'Lato',
fontSize: 14,
},
afterBuildTicks: getYTicks(),
gridLines: {
display: true,
color: 'rgba(50,50,50,0.2)',
zeroLineColor: 'rgba(50,50,50,0.5)',
zeroLineWidth: 2,
drawTicks: true,
tickMarkLength: 4,
},
}],
xAxes:[{
barPercentage: 0.8,
categoryPercentage: 1,
gridLines: {
display: false,
tickMarkLength: 10,
color: 'rgba(50,50,50,0.1)',
drawTicks: false,
offsetGridLines: false,
zeroLineColor: 'rgba(50,50,250,0.5)',
zeroLineWidth: 5,
},
scaleLabel: {
display: true,
labelString: 'Pages',
padding: 20,
fontFamily: 'Lato',
fontSize: 14,
},
ticks: {
beginAtZero: true,
callback: formatz,
fontFamily: 'Lato',
fontSize: 14,
},
}]
}
};
var myBarChart = Chart.Bar(canvas,{
data:data,
options:option
});
#myChart {
border: 1px solid black;
}
<script src="https://unpkg.com/moment#2.14.1/min/moment.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<canvas id="myChart" width="400" height="300"></canvas>