Rounding y-value icons with Morris.js charts

Question

I built some JSON data using Morris.js. The graph works fine, however I am trying to adjust the labels along the y axis in a line chart.

Currently yLabels are automatically generated by morris.js using a range of JSON data values ​​(where the x axis is the time). In my example, JSON values ​​range from 54 to -47, so the generated yLabels are 54, 29, 4, -22, -47. Instead, however, I would like to round these values ​​to -50, -25, 0, 25, and 50. I would also like the line "0" to stand out, I hope, with a different color.

Since I am creating data dynamically, they will not be fixed, in another graph the values ​​can range from -2.5 to +2.5 (in this case, I would like the labels along the y axis to be -2.5, -1 , 25, 0, 1.25, 2.5).

How can I get around the labels that morris.js creates and makes the "0" line red?

I tried to create an array of yLabels ( yLabels: ['-50','-25','0','25','50'], ), but that didn’t work, and even if I had no hard values code, because, as I said, each chart will be different and dynamically generated.

Any help is greatly appreciated.

UPDATE

In the first example, I managed to get what I want to set ymin and ymax from -50 and 50 respectively, but as I mentioned, I don’t want to hardcode these values, since ymin / max will vary depending on the JSON analysis . Is there a way I can always guarantee that the middle line is always 0, and morris defines two y values ​​above and below?

Answer 1

I can't do it using Morris's options. You will need to go into the source and change the drawGrid () function in the morris.grid.coffee file.

Answer 2

I increased the numLines gridDefaults property in morris.js and was able to display everything in my Y axis for display. Perhaps you could play around with this property to show your Y axis differently.