Display Y-axis labels as integers instead of floats (when no floats are in data)

[chartjs]

Display Y-axis labels as integers instead of floats (when no floats are in data)

[carlows]

It's been 6 years and this is still a valid issue :( why was it closed? If your data only has small integers (I believe less than 10 per data point) then it will display floats instead of integers in the axis

[visioncode]

really annoying :-( i always got 2 decimal points in each of my bar graphs (looks very strange cause it represent "minutes") An update would be amazing 👍

[psyose]

After some more testing I found the initial patch caused an infinite loop when using data sets containing zero values.

I created an alternative patch just after the while loop in the calculateScale function:

if (stepValue < 1) {
    stepValue = 1;
} else {
    stepValue = Math.round(stepValue);
}

Would be great if you could specify "integers: true" in the options.

[BC17]

var max = <?php echo json_encode(max(array_values($data))) ?>;
var option = {
scale: {
          ticks: {
                 beginAtZero: true,
                 steps: max/10 >= 1 ? max/10 : 1,
                 stepValue: max/10 >= 1 ? max/10 : 1,
                 max: max >=10 ? max : 10
                }
         }
}
}

and you will get only integers

[uBaze]

Waiting for an update, you can do these changes :

replace in the calculateScale function

   stepValue /= 2;

with

   stepValue = Math.round(stepValue / 2);

And replace in the getValueBounds() functions for Bar & Line

var minSteps = Math.floor((scaleHeight / labelHeight*0.5));

with

var minSteps = (upperValue < Math.floor((scaleHeight / labelHeight*0.5))) ? upperValue : Math.floor((scaleHeight / labelHeight*0.5));

This work great for me.
Hope it help.

Cheers.

Val

[erd0s]

I had this issue but I'm just precalculating the ticks in code (PHP) before passing the data off to chartjs

function get_steps($numberOfTicks, $dataPoints) {
    $max = round(max($dataPoints));
    $steps = ($max + ($numberOfTicks - $max % $numberOfTicks)) / $numberOfTicks;
    return $steps;
}

[psyose]

Resolved my problem! Thanks Val (uBaze)
+1

+1 "integers: true" in options but could we bulk this up a bit by passing in the float position as a variable.

stepValueX = integer; ( 20.000 = 20 )
stepValueX = float(2); ( 724 = 7.34 )

...and decouple X & Y treatments...

stepValueY = float(2);

As this codebase matures this will become increasingly viable.

[seyhunak]

@uBaze @psyose Can you please paste your js file, i tried modifications but still causing infinite loop.

[rakeshtembhurne]

I found this piece of code very helpful, worked for me.

var steps = 3;
new Chart(ctx).Bar(plotData, {
    scaleOverride: true,
    scaleSteps: steps,
    scaleStepWidth: Math.ceil(max / steps),
    scaleStartValue: 0
});

Source: http://stackoverflow.com/questions/15751571/how-to-change-the-y-axis-values-from-real-numbers-to-integer-in-chartjs

[uBaze]

@seyhunak I've pasted my file here : http://jsfiddle.net/Ase7V/

I've just add Math.floor to the label drawing function (you need to change for every type of char you want to round the value)

labels.push(tmpl(labelTemplateString, {value: Math.floor((graphMin + (stepValue * i))) }));

@populateLabels

[Netherdrake]

I keep getting infinite loop no matter what. Can anyone gist their entire Chart.js solution?

[uBaze]

@Netherdrake : The gist of my file, don't know if helpfull https://gist.github.com/uBaze/6962655

[nadimkobeissi]

+1

[MardyGit]

I have charts with highly variable values. This is how I set the scales so they are always integer values and ~10 steps...

var steps = new Number(model.maxValue);
var stepWidth = new Number(1);
if (model.maxValue > 10) {
    stepWidth = Math.floor(model.maxValue / 10);
    steps = Math.ceil(model.maxValue / stepWidth);
}
var options = { scaleOverride: true, scaleSteps: steps, scaleStepWidth: stepWidth, scaleStartValue: 0 };

[leeDav]

@uBaze This worked well, but gets stuck in an infinite loop for small numbers <= 1.

I included a simple IF to make it work again =)

stepValue = (stepValue <= 1) ? stepValue : Math.round(stepValue / 2);

[uBaze]

Ahh okay, nice !
In my case I don't work with small numbers <=1 that's why I didn't see that !

Well done ! :)

[orrd]

Was this issue ever fixed in the master Chart.js code? I'm using the latest version, but I'm still having this issue with decimal numbers on the axis labels. I would imagine this issue must effect a high percent of users who want to us Chart.js.

[orrd]

Here is a function that also does the work to calculate the max value (based on MardyGit's code)...

function wholeNumberAxisFix(data) {
   var maxValue = false;
   for (datasetIndex = 0; datasetIndex < data.datasets.length; ++datasetIndex) {
       var setMax = Math.max.apply(null, data.datasets[datasetIndex].data);
       if (maxValue === false || setMax > maxValue) maxValue = setMax;
   }

   var steps = new Number(maxValue);
   var stepWidth = new Number(1);
   if (maxValue > 10) {
       stepWidth = Math.floor(maxValue / 10);
       steps = Math.ceil(maxValue / stepWidth);
   }
   return { scaleOverride: true, scaleSteps: steps, scaleStepWidth: stepWidth, scaleStartValue: 0 };
}

So that way you can do something like "new Chart(ctx).Line(data, wholeNumberAxisFix(data))".

[karanveerm]

@orrd That works great, thanks so much!

[yusrul]

is this function (wholeNumberAxisFix() ) really work? i just test and seem like start with 0

[catcap]

@orrd Works perfectly! Thanks!

[fulldecent]

I am not able to reproduce this problem using the new version release candidate.

Could you please check if this has been fixed and close or create a JSBin showing the issue.

Thank you

[orrd]

I think it may have been fixed? This is the code from the original example (I just fixed the source since GitHub disabled hotlinking of JS): http://jsfiddle.net/SNLAw/19/