How to Create a Custom Logarithmic Axis in Chart.js - chart.js

Question

I'm trying to refactor an old Flex app using Chart.js and I would like to replicate this linear/log axis. Notice the clean minimal spacing on the yAxis.
Here is my Chart.js code.
var mtbsoData = [];
var mtbsoLables = [];
for (let i = 0; i <= 10; i++) {
mtbsoData.push(i * i * i * i);
mtbsoLables.push(i.toString());
}
var ctxMtbso = document.getElementById("chartMtbso").getContext('2d');
var chartMtbso = new Chart(ctxMtbso, {
type: 'bar',
data: {
labels: mtbsoLables,
datasets: [{
label: 'label',
data: mtbsoData,
backgroundColor: 'rgba(0, 0, 255, .6)',
borderColor: 'rgba(0, 0, 255, 1)',
borderWidth: 1
}]
},
options: {
title: {
text: 'Title',
display: true,
fontSize: 24
},
scales: {
xAxes: [{
display: true,
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'X Axis'
}
}],
yAxes: [{
type: 'logarithmic',
ticks: {
min: 0,
max: 1000,
callback: function (value, index, values) {
return value + ' years';
}
},
scaleLabel: {
display: true,
labelString: 'Y Axis'
}
}]
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += tooltipItem.yLabel.toFixed(2);
return label;
}
}
},
legend: {
display: false
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chartMtbso"></canvas>
Here's a screenshot. Notice the crowded ticks on the yAxis.
It seems from the documentation that the only ticks properties that you can apply are the "min" and "max" properties.
Can anybody suggest a solution?

Answer 1

I fixed it.
Modify the yAxes callback as shown:
yAxes: [{
type: 'logarithmic',
ticks: {
autoSkip: true,
min: 0,
callback: function (value, index, values) {
if( value==10 || value==100 || value==1000 || value==10000 || value==100000 || value==1000000){
return value + ' years';
}
}
},
scaleLabel: {
display: true,
labelString: 'Mean Time Between Stock-Out'
}
}]
Then you only return a tick if the value is a power of ten.