jquery - Is there any way to make morris.js area chart gradient -


i using morris.js area chart show weather report of year.

fiddle poc: http://jsfiddle.net/xtyr7/337/

script:

morris.area({  element: 'chart',  data: [  { m: 'jan', value: 3 },  { m: 'feb', value: 10 },  { m: 'mar', value: 5 },  { m: 'apr', value: 17 },  { m: 'may', value: 6 } // till december   ],  xkey: 'm',  ykeys: ['value'],  labels: ['orders'],  parsetime: false,  linecolors:['#1e9cb5'] }); 

i want fill area gradient. can suggest me workaround ?

using below method can achieve gradient fill

morris.area.prototype.fillforseries = function(i)   { var color; return "10-#3b7078-#b6b120:40-#bc951c-#3b7078:90-#3b7078"; } 

usage:

gradients linear gradient format: “‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›”, example: “90-#fff-#000” – 90° gradient white black or “0-#fff-#f00:20-#000” – 0° gradient white via red (at 20%) black.

radial gradient: “r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›”, example: “r#fff-#000” – gradient white black or “r(0.25, 0.75)#fff-#000” – gradient white black focus point @ 0.25, 0.75. focus point coordinates in 0..1 range. radial gradients can applied circles , ellipses.

reference: http://raphaeljs.com/reference.html#element.attr

demo: http://jsfiddle.net/xtyr7/338/


Comments

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -