chart.js not allowing y axis steps with logarithmic scale

Question

I had to parse the scientific notation that was a result of implementing logarithmic scale to my graph but it printed out each value for each line in the graph. No method of steps seems to be working.

RESULTING CHART IMG

var packetsElement = $("#packetsGraph");
    pckBarChart = new Chart(packetsElement, {
        type: 'bar',
        data: {
            labels: ["Received", "Errors", "Lost"],
            datasets: [{
                label: '# of Packets',
                data: packetsArr,
                backgroundColor: [
                    'rgba(55,102,245,0.3)',
                    'rgba(55,102,245,0.2)',
                    'rgba(55,102,245,0.1)'
                ],
                borderColor: [
                    '#3766F5',
                    '#3766F5',
                    '#3766F5'],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            title: {
                display: true,
                text: 'Packets',
                fontSize: 20
            },
            scales: {
                yAxes: [{
                    type: 'logarithmic',
                    ticks: {
                        min: 1,
                        stepSize: 1000000,
                        steps: 1000000,
                        stepValue: 1000000,
                        callback: function(value, index, values) {
                            return parseFloat(value);
                        }
                    }
                }]
            }
        }
    });

Answer 1

I figured it out, here's what I did in case any one else needs it:

var packetsElement = $("#packetsGraph");
    pckBarChart = new Chart(packetsElement, {
        type: 'bar',
        data: {
            labels: ["Received", "Errors", "Lost"],
            datasets: [{
                label: '% of Packets (Logarithmic)',
                data: packetsArr,
                backgroundColor: [
                    'rgba(55,102,245,0.3)',
                    'rgba(55,102,245,0.2)',
                    'rgba(55,102,245,0.1)'
                ],
                borderColor: [
                    '#3766F5',
                    '#3766F5',
                    '#3766F5'],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            title: {
                display: true,
                text: 'Packets',
                fontSize: 20
            },
            scales: {
                yAxes: [{
                    type: 'logarithmic',
                    ticks: {
                        min: 0,
                        max: 100,
                        callback: function(value, index, values) {//needed to change the scientific notation results from using logarithmic scale
                            return Number(value.toString());//pass tick values as a string into Number function
                        }
                    },
                    afterBuildTicks: function(pckBarChart) {    
                        pckBarChart.ticks = [];
                        pckBarChart.ticks.push(0);
                        pckBarChart.ticks.push(25);
                        pckBarChart.ticks.push(50);
                        pckBarChart.ticks.push(75);
                        pckBarChart.ticks.push(100);
                      }
                }]
            },
            tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function(tooltipItems, data) { 
                        return tooltipItems.yLabel + ' %';
                    }
                }
            },
        }
    });

Answer 2

In my case, the y-axis values were not known ahead of time, so I used this in my options object:

(using underscore/lodash)

{
  ...

  ticks: {
    beginAtZero: true,
    min: 0,
    callback: function(tick, index, ticks){
      return tick.toLocaleString();
    },
  },
  afterBuildTicks: function(chart){
    var maxTicks = 20;
    var maxLog = Math.log(chart.ticks[0]);
    var minLogDensity = maxLog / maxTicks;

    var ticks = [];
    var currLog = -Infinity;
    _.each(chart.ticks.reverse(), function(tick){
      var log = Math.max(0, Math.log(tick));
      if (log - currLog > minLogDensity){
        ticks.push(tick);
        currLog = log;
      }
    });
    chart.ticks = ticks;
  }

  ...
}

maxTicks can be adjusted to make the ticks more/less dense.