column comibination dual axix chart formating

[Former Member]

I need help correcting following CSS code to change color of lines. I tried lot of CSS code around the forum and nothing working. I was able to find the element using F12 and it's working when i change the color but it's not working when i put the code in CSS.

Here is the code i am trying

/* measure 3 displayed as line */ 

.chartstyle .v-m-plot g.v-module g.v-datalines path.v-lines.v-morphable-line:nth-child(1) {stroke: yellow;} 

.chartstyle .v-m-plot g.v-module g.v-markers.v-datashapesgroup path.v-datapoint.v-morphable-datapoint:nth-child(1) {fill: yellow;} 

/* adjust colors for measures in the legend to match adjusted colors in the bars/lines */ 

.chartstyle .v-legend-content g.v-row.ID_0 path {fill: yellow;} 

Thanks

[Former Member · Accepted solution]

Hello Venkat,

I tried to change colors of 4 axis lines in my column combination dual axis chart using css as below. I think your issue will be solved by adding  !important to your code.

svg.v-m-root g.v-m-main g.v-m-plot g.v-modules g.v-module g g.v-datalines g.v-axis1 path.v-lines:nth-child(1) {

stroke:  red !important;

}

svg.v-m-root g.v-m-main g.v-m-plot g.v-modules g.v-module g g.v-datalines g.v-axis1 path.v-lines:nth-child(2) {

stroke:  blue !important;

}

svg.v-m-root g.v-m-main g.v-m-plot g.v-modules g.v-module g g.v-datalines g.v-axis2 path.v-lines:nth-child(1) {

stroke:  violet !important;

}

svg.v-m-root g.v-m-main g.v-m-plot g.v-modules g.v-module g g.v-datalines g.v-axis2 path.v-lines:nth-child(2) {

stroke:  green !important;

}

This css works for me. Let me know if this solves your issue.

Thanks,

Nithya V

[Former Member · Accepted solution]

Thanks Nithya, still not working. I have these key figures in Rows and i am not sure i have to change any properties.

Thanks

[Former Member · Accepted solution]

can you paste the css you are using?

[Former Member · Accepted solution]

.chartstyle {

svg.v-m-root g.v-m-main g.v-m-plot g.v-modules g.v-module g g.v-datalines g.v-axis1 path.v-lines:nth-child(1) {

stroke:  red !important;

}

svg.v-m-root g.v-m-main g.v-m-plot g.v-modules g.v-module g g.v-datalines g.v-axis1 path.v-lines:nth-child(2) {

stroke:  blue !important;

}

svg.v-m-root g.v-m-main g.v-m-plot g.v-modules g.v-module g g.v-datalines g.v-axis2 path.v-lines:nth-child(1) {

stroke:  violet !important;

}

svg.v-m-root g.v-m-main g.v-m-plot g.v-modules g.v-module g g.v-datalines g.v-axis2 path.v-lines:nth-child(2) {

stroke:  green !important;

}

}

Thanks

[Former Member · Accepted solution]

Venkat, Please try this:

.chartstyle g.v-m-plot g.v-modules g.v-module g g.v-datalines g.v-axis1 path.v-lines.v-morphable-line:nth-child(1) {

stroke:  red !important;

}

.chartstyle g.v-m-plot g.v-modules g.v-module g g.v-datalines g.v-axis1 path.v-lines.v-morphable-line:nth-child(2) {

stroke:  yellow !important;

}

.chartstyle g.v-m-plot g.v-modules g.v-module g g.v-datalines g.v-axis2 path.v-lines:nth-child(1) {

stroke:  violet !important;

}

.chartstyle g.v-m-plot g.v-modules g.v-module g g.v-datalines g.v-axis2 path.v-lines:nth-child(2) {

stroke:  green !important;

}

I am assuming you are already setting the CSS class property of the chart to chartstyle . Let me know if this resolves your issue.

[Former Member · Accepted solution]

Thanks Nithya for quick response. It's still not working, Yes i am setting CSS class property to chartstyle.

Thanks

DS1.4 SP1

[Former Member · Accepted solution]

I noticed that you wrapped all your css inside .chartstyle { }. that has to be removed.

Just making sure.

Thanks

[Former Member · Accepted solution]

You are right, i put all my code in side the chartstyle {}.Thank you very much!. It worked.

[Former Member · Accepted solution]

Nithya,

I have a one more question, i am using following code to color data points in lines and all lines are showing same color. I want same line color in data point.

.chartstyle g.v-m-plot g.v-axis1 g.v-marker g.v-datashape path:nth-child(1) {fill: red;}

Thanks

[Former Member · Accepted solution]

I will check now. Do you also have legends that don't match the line colors? Thanks - Nithya V

[Former Member · Accepted solution]

My code is as follows, can you try something similar?

.chartstyle g.v-m-plot g.v-modules g.v-module g g.v-datalines g.v-axis1 path.v-lines:nth-child(1) {

stroke:  yellow !important;}

.chartstyle g.v-m-plot g.v-modules g.v-module g g.v-datalines g.v-axis2 path.v-lines:nth-child(1) {

stroke:  violet !important;}

.chartstyle g.v-m-plot g.v-modules g.v-module g g.v-datalines g.v-axis2 path.v-lines:nth-child(2) {

stroke:  green !important;}

.chartstyle g.v-m-plot g.v-modules g.v-module g g.v-markers g.v-axis1 g.v-marker g.v-datashape  path.v-datapoint.v-morphable-datapoint.v-datapoint-default {fill: yellow !important;}

.chartstyle g.v-m-plot g.v-modules g.v-module g g.v-markers g.v-axis2 g:nth-child(1).v-marker .v-datashape {fill: violet !important;}

.chartstyle g.v-m-plot g.v-modules g.v-module g g.v-markers g.v-axis2 g:nth-child(2).v-marker .v-datashape {fill:  green !important;}

[Former Member · Accepted solution]

Nithya,

Thanks for quick response. This is the code worked for me....

.chartstyle g.v-m-plot g.v-modules g.v-module g g.v-markers g.v-axis1 g.v-marker:nth-child(2) path.v-datapoint.v-morphable-datapoint.v-datapoint-default {fill: yellow;}

Thanks

[TammyPowlas]

Hi Venkat,

I am a little confused

What are you trying to change as shown in the F12 screen shot?

Maybe try this first line of CSS:

g.v-m-main v-m-plot g.v-module g.v-datalines path.v-lines.v-morphable-line:nth-child(1) {stroke: yellow;} 

[Former Member]

Thanks Tammy for quick response. I am trying to change line colors in axis1. When i change the code in F12 i am able to see the right color. I want to implement the same code in CSS. I placed your code in beginning of the CSS and it's not changing line color.

Thanks