CODEWITHSUNDEEP
javascriptmorris.js
Graeme
Graeme

Reputation: 497

morris.js dashed grid lines

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!

Upvotes: 1

Views: 2853

Answers (2)

ChuckD
ChuckD

Reputation: 11

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);
};

Upvotes: 0

Graeme
Graeme

Reputation: 497

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!

Upvotes: 1

Related Questions