Formatting a combined dual chart - which svg commands necessary?

Question

Hello all,
I have a combined dual chart (two columns and one line) as shown in the picture below. I'd like to format the following things:
- color of columns (costs in one color and Incoming Order List in a different)
- color of outer ticks of both y-axis
- hiding the minor gridline of y-axis
I changed both y-axis colors with this svg-css lines:
.chart-style-1 g.v-m-yAxis g.viz-axis-body.v-body path.v-fixed-valueaxisline {stroke: #dbcbcb;}
.chart-style-1 g.v-m-yAxis2 g.viz-axis-body.v-body path.v-fixed-valueaxisline {stroke: #dbcbcb;}
For the outer tick lines I tried this - but it didn't work:
.chart-style-1 g.v-m-yAxis g.viz-axis-body.v-body line.v-fixed-valueaxisline {stroke: #dbcbcb;}
I also tried to hide the minor gridline with this command (also no impact):
.chart-style-1 g.v-m-yAxis g.viz-axis-body.v-body line.v-gridline {stroke-width: 0;}
The color configuration of a dual chart is very limited. You can only set colors for 2 series and Design Studio colors the y-axis as well. There is no color configuration for the individual measures anymore.
Does anyone has an idea of how the SVG commands in CSS has to be for changing the colors of columns and outer ticks and hide the minor gridline?
Thanks,
Andreas

Answer 1

Hi Andreas,
After using the following CSS:
/* Y-AXIS: change color for the side Y-AXIS lines */
.chart-style-1 g.v-m-yAxis g.viz-axis-body.v-body path.v-fixed-valueaxisline {stroke: pink;}
.chart-style-1 g.v-m-yAxis2 g.viz-axis-body.v-body path.v-fixed-valueaxisline {stroke: pink;}
/* Y-AXIS: For the outer tick lines */
/* change color */
.chart-style-1 g.v-m-yAxis g.viz-axis-body.v-body line.v-fixed-valueaxisline {stroke: black;}
.chart-style-1 g.v-m-yAxis2 g.viz-axis-body.v-body line.v-fixed-valueaxisline {stroke: black;}
/* or hide */
.chart-style-1 g.v-m-yAxis g.viz-axis-body.v-body line.v-fixed-valueaxisline {stroke-width: 0;}
.chart-style-1 g.v-m-yAxis2 g.viz-axis-body.v-body line.v-fixed-valueaxisline {stroke-width: 0;}
/* set colors for measures */
/* measure 1 and 2 displayed as bars */
.chart-style-1 g.v-column g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint {fill: gold;} 
.chart-style-1 g.v-column g.v-datashape:nth-child(2) rect.v-datapoint.v-morphable-datapoint {fill: orange;}
/* measure 3 displayed as line */
.chart-style-1 g.v-m-plot g.v-module g.v-datalines path.v-lines.v-morphable-line {stroke: silver;}
.chart-style-1 g.v-m-plot g.v-module g.v-markers.v-datashapesgroup path.v-datapoint.v-morphable-datapoint {fill: silver;}
/* adjust colors for measures in the legend to match adjusted colors in the bars/lines */
.chart-style-1 g.v-legend-content g.v-row.ID_0 path {fill: gold;}
.chart-style-1 g.v-legend-content g.v-row.ID_1 path {fill: orange;}
.chart-style-1 g.v-legend-content g.v-row.ID_2 path {fill: silver;}
The Chart looks as follows:
Useful thread/answer regarding changing colors for measures in a column combination chart with css: http://scn.sap.com/message/15155308#15155308
Kind regards,
David