thomas thomas - 1 year ago 85
HTML Question

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

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.

Answer Source

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 it to use it right now, you have to download this version and configure like following:

      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 I know my data will present no less than 0 values. Therefore, it works like a charm.

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

Without the patch enter image description here