All my labels are on the top of the bars. I can see this:
but I want that would be like this:
Padding doesn't work for xAxes but works for yAxes.
legend: {display: false},
scales: {
xAxes: [{
position: 'top',
stacked: true,
ticks: {
stepSize: 1,
min: 0,
autoSkip: false,
fontColor: '#3f7ba2',
fontStyle: 600,
fontFamily: 'Italic',
},
gridLines: {
color: '#dedfe7',
tickMarkLength: 0,
}
}],
yAxes: [{
stacked: true,
ticks: {
min: 0,
fontColor: '#62aae8',
padding: 5
},
gridLines: {
color: '#dedfe7' //b5cce2
}
}],
}
All my labels are on the top of the bars. I can see this:
but I want that would be like this:
Padding doesn't work for xAxes but works for yAxes.
legend: {display: false},
scales: {
xAxes: [{
position: 'top',
stacked: true,
ticks: {
stepSize: 1,
min: 0,
autoSkip: false,
fontColor: '#3f7ba2',
fontStyle: 600,
fontFamily: 'Italic',
},
gridLines: {
color: '#dedfe7',
tickMarkLength: 0,
}
}],
yAxes: [{
stacked: true,
ticks: {
min: 0,
fontColor: '#62aae8',
padding: 5
},
gridLines: {
color: '#dedfe7' //b5cce2
}
}],
}
1 Answer
Reset to default 4This is an issue that only persists in chart.js version 2.6.0 and lower. As you can read in the release notes under the bug fixes it says that in PR 4403 ticks.padding option now applies to vertical and horizontal scales.
So to solve your issue you will need to update to a version of chart.js higher or equal to 2.7.0
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
xAxes: [{
position: 'top',
ticks: {
padding: 100
}
}],
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.0/Chart.js"></script>
</body>