Alexandria Alexandria - 1 month ago 31
Javascript Question

chart.js not allowing y axis steps with logarithmic scale

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

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