morris.js dashed grid lines

Question

I am trying to customize the grid lines for morris.js to have a dashed style similiar to the revenue graph in http://dribbble.com/shots/947782-Freebie-PSD-Flat-UI-Kit/attachments/107093, Is this even possible? It seems that the documentation is not very complete, gridLineColor is not listed as an option yet it does change the color when I add it to my graph. Morris.js seemed to be highly recommended but I cant seem to adjust simple things like this.

I would also like to have each grid line the same weight and not have the center line emphasized while the others lighter. I cant seem to find anything in the documentation for that either.

Thanks for any help!

Answer 1

There doesn't seem to be an option yet for this in morris.js but I was able to edit the uncompressed morris.js file to add an option for dashed grid lines. Simply add .attr('stroke-dasharray', this.options.gridDashed) to the end of line 508. You can then add the option gridDashed: '--' to the graphs you would like dashed grid lines on!

Answer 2

Here is the line that needed changing in Graeme's answer:

Grid.prototype.drawGridLine = function(path) {
    return this.raphael.path(path).attr('stroke', this.options.gridLineColor).attr('stroke-width', this.options.gridStrokeWidth).attr('stroke-dasharray', this.options.gridDashed);
};