Changing colors on a dual-axis chart

[Former Member]

I've found few posts very helpful in terms of chart customization in Design Studio. I have a very specific question pertaining to 'Column Combination - Dual Axis' chart type. Here it goes:

I have 5 measures being plotted on Y-axis1 and 3 measures on Y-axis2. Currently the colors of these measures are based on the axes colors but I want to change the colors to something that the customer wants for each of these measures. I've tried CSS code mentioned in other posts but that changes the colors of all the measures (say Y-axis1) to a single color, there by not able to distinguish between them. I'm running the application on IE 9 and tried to look at the CSS selectors but being a novice at that, I couldn't decipher where the charts CSS is being used. BTW, I'm using DS 1.2.

I would really appreciate if someone can help me out.

[Former Member · Accepted solution]

Hi Vivek,

Here some css you can try. In your case it is the 2nd example where you assign the custom class "customChart2" to your chart component.

The first example is for a chart with 5 measures, where the colors for all 5 measures are changed. The second example is for a chart with 8 measures, where the colors for all 8 measures are changed.

/* Chart Type: Column - Combination, Swap Axes: true, All Measures Displayed as Columns */
/* Assign custom css class to chart in DS: Your Chart > Display > CSS Class: customChart1 */
/* adjust colors for measures displayed as columns */
.customChart1 g.v-column g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint {fill: yellow;}
.customChart1 g.v-column g.v-datashape:nth-child(2) rect.v-datapoint.v-morphable-datapoint {fill: orange;}
.customChart1 g.v-column g.v-datashape:nth-child(3) rect.v-datapoint.v-morphable-datapoint {fill: red;}
.customChart1 g.v-column g.v-datashape:nth-child(4) rect.v-datapoint.v-morphable-datapoint {fill: blue;}
.customChart1 g.v-column g.v-datashape:nth-child(5) rect.v-datapoint.v-morphable-datapoint {fill: green;}
/* adjust colors for measures in the legend to match adjusted colors in the columns */
.customChart1 g.v-legend-content g.v-row.ID_0 path {fill: yellow;}
.customChart1 g.v-legend-content g.v-row.ID_1 path {fill: orange;}
.customChart1 g.v-legend-content g.v-row.ID_2 path {fill: red;}
.customChart1 g.v-legend-content g.v-row.ID_3 path {fill: blue;}
.customChart1 g.v-legend-content g.v-row.ID_4 path {fill: green;}

/* Chart Type: Column Combination - Dual Axis, Swap Axes: true, All Measures on Both Axis Displayed as Bars */
/* Assign custom css class to chart in DS: Your Chart > Display > CSS Class: customChart2 */
/* adjust colors for measures displayed as bars */
.customChart2 g.v-column g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint {fill: gold;}
.customChart2 g.v-column g.v-datashape:nth-child(2) rect.v-datapoint.v-morphable-datapoint {fill: orange;}
.customChart2 g.v-column g.v-datashape:nth-child(3) rect.v-datapoint.v-morphable-datapoint {fill: purple;}
.customChart2 g.v-column g.v-datashape:nth-child(4) rect.v-datapoint.v-morphable-datapoint {fill: brown;}
.customChart2 g.v-column g.v-datashape:nth-child(5) rect.v-datapoint.v-morphable-datapoint {fill: red;}
.customChart2 g.v-column g.v-datashape:nth-child(6) rect.v-datapoint.v-morphable-datapoint {fill: green;}
.customChart2 g.v-column g.v-datashape:nth-child(7) rect.v-datapoint.v-morphable-datapoint {fill: blue;}
.customChart2 g.v-column g.v-datashape:nth-child(8) rect.v-datapoint.v-morphable-datapoint {fill: black;}
/* adjust colors for measures in the legend to match adjusted colors in the bars */
.customChart2 g.v-legend-content g.v-row.ID_0 path {fill: gold;}
.customChart2 g.v-legend-content g.v-row.ID_1 path {fill: orange;}
.customChart2 g.v-legend-content g.v-row.ID_2 path {fill: purple;}
.customChart2 g.v-legend-content g.v-row.ID_3 path {fill: brown;}
.customChart2 g.v-legend-content g.v-row.ID_4 path {fill: red;}
.customChart2 g.v-legend-content g.v-row.ID_5 path {fill: green;}
.customChart2 g.v-legend-content g.v-row.ID_6 path {fill: blue;}
.customChart2 g.v-legend-content g.v-row.ID_7 path {fill: black;}

Regards,

David

[Former Member · Accepted solution]

Hi David,

We use DS 1.2.

Our Dual Axis Column chart has 2 line measures and bar's as another measure axis.

We want to have separate color for both the lines.

I attempt to change color using the below CSS code, but I'm missing something.

Could you help me how to get separate colors for both lines.

g.v-m-main g.v-m-plot g.v-axis1:nth-child(1)  .v-lines.v-morphable-line {stroke: red;}

g.v-m-main g.v-m-plot g.v-axis1:nth-child(2) .v-lines.v-morphable-line {stroke: blue;}

Thanks much in advance

Vee

[Former Member · Accepted solution]

Got it working with below piece CSS

.chart-style-3 g.v-m-main g.v-m-plot g.v-axis1 .v-lines.v-morphable-line:nth-child(1) {Stroke: #0000FF;}

.chart-style-3 g.v-m-main g.v-m-plot g.v-axis1 .v-lines.v-morphable-line:nth-child(2) {Stroke: #FF0000;}

Thanks

Karthik

[Former Member · Accepted solution]

Thank you so Much Karthik. It worked well for me.

[Former Member · Accepted solution]

This message was moderated.

[Former Member]

i have a issue coming in my Chart, the issue is explained in the below discussion. Could anyone help me figuring out any work around or if i can force Design Studio to use #748CB2 for the color that is needed

[former_member193885]

You could do this in DS 1.3 using standard chart editor, not sure upgrading is an option for you.

I havent tried debugging DS 1.2 for this specific chart type to see whether it works.

[Former Member]

Hi Deepu,

Thanks for your reply. In 1.3, for 'Column Combination - Dual axis' chart, can you pick the colors for the measures though? I saw your post where only the 'axes' colors can be chosen (just like in 1.2). Also, does 1.3 have a 'Stacked Column Combination with Line - Dual axis' chart? Not sure if the 'Additional chart types..' in 1.3 has this functionality. Appreciate your reply.

-VV

[former_member193885]

The way it works in 1.3 for Column Combination - Dual Axis Chart is you can pick the Axis colors and it will plot the series with different shades of the color you pick.  In the screenshot in my previous post you can see it, the axis color is green and the two bars on Primary Axis are plotted in shades of green (you cannot control this by series) and secondary axis is Orange and the series on secondary axis are plotted using shades of Orange.

I dont believe 1,3 has 'Stacked Column Combination with Line - Dual axis' . We have a Design Studio add-on ChartsPLUS, which provides  Stacked Column-Line Dual Axis and also the ability to control series colors on a Dual Axis Combo chart. This works with 1.2 and 1.3. Please see screenshot below  from ChartsPLUS with the functionality you are looking for.  You can find more info at:

Archius ChartsPLUS™ for SAP BusinessObjects Design Studio