Integers as y-axis in a morris.js line chart

Question

I have started using morris.js line chart in my html page. Is there a way to set the y-axis to only contain integers? Now it displays decimal numbers, but my data set only contains integers.

Bin

Answer 1

This feature was added by this pull request about 25 days ago on the Github repository. It added the option gridIntegers that, by default, is set to false. It is still not merged to the main repository. Therefore, if you want to use it right now, you have to download this version and configure like following:

    Morris.Line({
      element: "mydiv",
      data: mydata,
      xkey: 'time',
      ykeys: ['value'],
      labels: ['Requisições'],
      gridIntegers: true,
      ymin: 0
    });

Have you seen a ymin parameter set to 0? That is the caveat! The y-axis will work with only integers if and only if you set your custom y-min and/or y-max boundaries. In my case it is doable as I know my data will present no values inferior to 0. Therefore, it works like a charm.

You can see bellow the difference when not using and when using the patch:

Aquacade

Answer 2

Here's the actual code I used....

new Morris.Bar({
  ...
  yLabelFormat: function(y){return y != Math.round(y)?'':y;},
  ...
});

Wye

Answer 3

Another simpler solution that can be used ... This keeps the interval calculation between the lines.

yLabelFormat: function(y){return y = Math.round(y);},

Jephum