SAP Design Studio 1.6: Change the color of the charts with CSS

[Former Member]

Hi

I have got Design Studio 1.6 and I would like to change the colors of my bar/line/donat/and other-charts. I can change the colors of the legend and x- and y-axes labels. But the bars and column, etc. do not work. I have tried all the codes from but it won't work.

Thanks for your help.

[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 Member]

Hello,

You have even a easier solution:

Each element of the graph related to a serie has as attribute the associated color.

For instance, with this CSS, I am able to target the first serie with default color

/* Line */
path[stroke="#748cb2"] {
    stroke:RED;
}



/* Legend + Data Points */
path[fill="#748cb2"],
.v-datapoint[fill="#748cb2"] {
    fill:RED;
}

You can also change the title with:

/* Change the title color */
.v-title {
    fill:gray;
}

To know if you have to use Stroke or Fill, just inspect the generated HTML and target/change it accordingly with CSS.

You can also add CSS class to your graph (scenarioGraphRed, scenarioGraphGreen) and change dynamically the colors of lines according to scenarios:

/* Line */
.scenarioGraphRed path[stroke="#748cb2"] {
    stroke:RED;
}
.scenarioGraphGreen path[stroke="#748cb2"] {
    stroke:GREEN;
}

You can also move the data labels up (example):

/* move graph labels up */
.v-datalabel {
    transform: translate(0px, -20px);
}

[Former Member]

It won't work. Tammy, could you upload a picture of your result if you say that it works for you.

My actual question is, when I have a column chart, what do I have to type in my css file to change the color of every column (one color for all column?

The same for the bars, pie charts?

Pictures are very welcome. Thanks a lot

[TammyPowlas]

This CSS is working for me

.UIComp_1-8b057103-944c-40cf-bf19-15908bf98b1d .v-label.viz-legend-valueLabel

{

color: red;

margin: 0 auto;

text-align: center;

}

g.v-label.viz-axis-label > text{

fill: blue;

text-align: center;

}

g.v-m-main g.v-m-plot g.v-markers.v-datashapesgroup g.v-axis1 path.v-datapoint.v-morphable-datapoint:nth-child(1) {fill: green;}

g.v-m-main g.v-m-plot g.v-markers.v-datashapesgroup g.v-axis2 path.v-datapoint.v-morphable-datapoint:nth-child(1) {fill: red;}

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

Maybe you can check your CSS to see if it is in the repository folder

[Former Member]

It just changes my x-axis labels into blue. The rest is like before. FYI: I am trying this with a column chart.

[TammyPowlas]

Maybe you could share the text of your CSS and screen shots of your application - use the camera icon to upload the image

[Former Member]

I copied and pasted you css code in my css-file. 1 to 1

It immediately changed my chart (y-axis color) but not the bars or the legend.

I need to cover the text. But you can see the beginning an the color of the text.

[Former Member]

Hi Roman,

Because you are using InfoChart I can say 100% that you cannot change color of bars dynamically because the colors you set in the Additional Page at Design Time, become part of the generated HTML code at Runtime.

Regards,

Bogdan

[former_member339599]

Just curious is anyone has figured this out yet. I haven't had any luck yet. Why would 1.6 be so different from 1.5?