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

[BurnCodeigniter]

I have a line graph that I need the Y-axis labels to be displayed as integers than floats, as my data has no floats added to it, you should enable an option to set display as floats or integers.

Demo (from what I mean): http://jsfiddle.net/SNLAw/

[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 :+1:

[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

[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.

[ghost]

+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/

[ghost]

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

[kaepora]

+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/

[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

[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