Assign colors in CSS to dimensions based on values

Hi,

I would like to create a stacked bar chart which contains 5 childs on the axis.

Based on the values, I want to color them.

Currently I have done the coloring via CSS script below:

.chart-stackedbar1 g.v-stackedcolumn g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint {fill: #821E7D;}
.chart-stackedbar1 g.v-stackedcolumn g.v-datashape:nth-child(2) rect.v-datapoint.v-morphable-datapoint {fill: #005C7E;}
.chart-stackedbar1 g.v-stackedcolumn g.v-datashape:nth-child(3) rect.v-datapoint.v-morphable-datapoint {fill: #008CBE;}
.chart-stackedbar1 g.v-stackedcolumn g.v-datashape:nth-child(4) rect.v-datapoint.v-morphable-datapoint {fill: #525151;} 
.chart-stackedbar1 g.v-stackedcolumn g.v-datashape:nth-child(5) rect.v-datapoint.v-morphable-datapoint {fill: #CFD4D8;}

The 5 childs are having different values in a dimension like

Dimension is Country and the values are Germany,Belgium,France,UK and Netherlands

I want to fix the colors based on the values above and not on child(n)

The current CSS is working fine in case I am not using the filters in the dashboard. If I filter out one or more values the childs are shifting and the colors

are shifting along.

I do know we have an option in Design studio itself to color the series format but I would like to have it in the stylesheet so it can be applied on other elements as wel and adjusting the charts will only require an update on the CSS file.

Any tips in fulfilling my requirement ?

Regards,

Gert Jan