How to Create a Custom Logarithmic Axis in 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.