Styling Of Charts Externally

Is it possible to translate(detach) bar colors stated in js file to separate css stylesheet. How to assign classes to this values? /* Bar dashboard chart */ Morris.Bar({ element:

Solution 1:

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

If you must style the bars via css, one option is to set the bars to placeholder colors, match on the fill attribute, and override the fill attribute with 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 a similar workaround.