Skip to Content
avatar image
Former Member

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

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.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Feb 08, 2016 at 10:19 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Feb 08, 2016 at 07:09 PM

    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);

    }

    Add comment
    10|10000 characters needed characters exceeded

    • 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

  • avatar image
    Former Member
    Sep 02, 2016 at 08:40 PM

    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

    Add comment
    10|10000 characters needed characters exceeded