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; }
Comments
Post a Comment