[Chartjs]-Chart.js not allowing y axis steps with logarithmic scale

by

14👍

✅

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 + ' %';
                    }
                }
            },
        }
    });

enter image description here

5👍

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.

Leave a comment