on 2015 Aug 17 10:02 PM
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
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
.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
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.
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;}
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;}
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
66 | |
10 | |
10 | |
10 | |
10 | |
8 | |
6 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.