javascript - Styling of charts externally -


is possible translate(detach) bar colors stated in js file separate css stylesheet. how assign classes values?

/* bar dashboard chart */ morris.bar({ element: 'dashboard-bar-1', data: [ { y: 'oct 10', a: 100, b: 35 }, { y: 'oct 11', a: 34, b: 156 }, { y: 'oct 12', a: 78, b: 39 }, { y: 'oct 13', a: 200, b: 70 }, { y: 'oct 14', a: 106, b: 79 }, { y: 'oct 15', a: 120, b: 80 }, { y: 'oct 16', a: 126, b: 41 } ], xkey: 'y', ykeys: ['a', 'b'], labels: ['unique', 'returned'], barcolors: ['#588007', '#b64645'], fillopacity: 0.6, gridtextsize: '10px', hidehover: true, resize: true, gridlinecolor: '#e5e5e5' }); /* end bar dashboard chart */  /* donut dashboard chart */     morris.donut({         element: 'dashboard-donut-1',         data: [             {label: "returned", value: 1513},             {label: "new", value: 764},             {label: "unique", value: 300},             {label: "registered", value: 1311},             {label: "guests", value: 250}         ],         colors: ['#588007', '#fea223', '#435f0a', '#b64645', '#fff'],         resize: true     });     /* end donut dashboard chart */ 

morris doesn't support setting custom classes on bars (this has been open pull request since 2014).

if must style bars via css, one option set bars placeholder colors, match on fill attribute, , override fill attribute external styles (hack warning! :d).

// script.js morris.bar({   element: 'dashboard-bar-1',   barcolors: ['#000001', '#000002'],   ... });  // style.css #dashboard-bar-1 rect[fill="#000001"] {     fill: green; }  #dashboard-bar-1 rect[fill="#000002"] {     fill: blue; } 

donut has similar workaround.


Comments

Popular posts from this blog

c# - Better 64-bit byte array hash -

webrtc - Which ICE candidate am I using and why? -

php - Zend Framework / Skeleton-Application / Composer install issue -