score:2

Accepted answer

First, set your colours array:

var colors = ['#7fc97f','#beaed4','#fdc086','#ffff99','#386cb0','#f0027f','#bf5b17','#666666'];

Then, in your rectangles (not in your groups), set the fill of each bar using the parent's index:

.attr("fill", function(d, i, j) {
      return colors[(j*4)+i];
 });

Here, the magic number "4" is the number of groups. Change it accordingly (if you create more bars).

Here is your fiddle: https://fiddle.jshell.net/747beqqc/


Related Query

More Query from same tag