Advanced chart styling in Design studio

Question

Hello!
In my chart (combination - dual Axis) i need to compare data between subsidiaries.
In Bex query i have 2 characteristics: 0comp_code and 0calmonth
and 3 key figures: "Hired amount", "Fired amount" and "Turnover %".
In Application i've placed "Hired amount", "Fired amount" on Axis1 and "Turnover %" on Axis2.
During the application i move 0comp_code dimension to the Rows.
It looks fine then there is only one selected subsidiary - every key figure's color distinguish well:
By the way in chart's additional properties we can't select color for individual key figure, only for Axis:
As variant we can use Conditional formatting for chart to set key figures color.
But if select two or more subsidiaries Design studio automatically tints each key figure for additional subsidiary:
It is simple to manage coloring for Key figure in Axis2, because there is only one Key figure:
In my case i used such a CSS code:
// Color for line in Axis2
svg g.v-m-plot g.v-datalines g.v-axis2 path:nth-child(1).v-lines.v-morphable-line
{stroke-width: 5;
stroke: #ADC6E5}
svg g.v-m-plot g.v-datalines g.v-axis2 path:nth-child(2).v-lines.v-morphable-line
{stroke-width: 5;
stroke: #FF0000}
// Color for dots
svg g.v-m-plot g.v-markers.v-datashapesgroup g.v-axis2 g.v-marker g.v-datashape path.v-datapoint.v-morphable-datapoint
{fill: #000000;}
But i don't know how to colour key figures in bars:
If use this code, the result is not what i need:
g.v-m-main g.v-m-plot g.v-column:nth-child(even) .v-datapoint.v-morphable-datapoint {fill: green;}
g.v-m-main g.v-m-plot g.v-column:nth-child(odd) .v-datapoint.v-morphable-datapoint {fill: yellow;}
As well as a listing of all childs in CSS not a good idea.
Please advise a solution how to manage colouring of key figures for every subsidiary.
Like this (diagram from excel):

Answer 1

Hi Yaroslav,
By using CSS alone there are less possiblity of acheiving dynamic coloring for your situation,
As you already mentioned ,
nth-child(even)
nth-child(odd)
Not producing the result you expect, the next option will be formula
nth-child(-n+3)
Which will also wont provide the result you expect i hope. So the last solution will be this one by specifiying it indivdually(hard coded)
g.v-m-main g.v-m-plot g.v-column:nth-child(1) .v-datapoint.v-morphable-datapoint {fill: green;}
g.v-m-main g.v-m-plot g.v-column:nth-child(2) .v-datapoint.v-morphable-datapoint {fill: yellow;}
  g.v-m-main g.v-m-plot g.v-column:nth-child(3) .v-datapoint.v-morphable-datapoint {fill: blue;}
g.v-m-main g.v-m-plot g.v-column:nth-child(4) .v-datapoint.v-morphable-datapoint {fill: red;}
I think this are all possiblities with the nth-child pseudo selector.