Skip to Content
author's profile photo Former Member
Former Member

CSS on SAP Design Studio

Hi everyone,

I am learning about Sap Design Studio and I am trying to achieve some goal related to CSS and have good understanding about it.

I have read a lot about CSS and how to work with it on Design Studio however I still have a lot questions.

I have done what a lot of people say about how to work with css classes and I have achieve some tasks I have to do.

But in this case I really need someone specific help.

I want to change the color of circle green / circle blue, but I am not able to find the sap class used in this object:

As you guys can see there is no sap class associated. If I change the red values on the page the circle will change.

How can I do this using the right css?

HTLM CODE:

<g class="v-row ID_0" transform="translate(0,0)">

<path class="" fill="#84A328" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M-6,0 A6,6 0 1,0 6,0 A6,6 0 1,0 -6,0z" transform="translate(6,6)">

<text x="18" y="12">Real</text>

<rect class="v-eventRect v-legend-item ID_1" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="52.5">

</g>

<g class="v-row ID_1" transform="translate(0,18)">

<path class="" fill="#529CD2" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M-6,0 A6,6 0 1,0 6,0 A6,6 0 1,0 -6,0z" transform="translate(6,6)">

<text x="18" y="12">Plano</text>

Thanks and regards

pastedImage_1.png (77.1 kB)
Add a comment
10|10000 characters needed characters exceeded

Related questions

2 Answers

  • Posted on Apr 29, 2016 at 04:16 PM

    Hello,

    Are you trying to change the circles on the chart or the legend?

    Here is my for the circles on the chart:

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

    Result:


    douglas.png (27.2 kB)
    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Apr 29, 2016 at 04:16 PM

    Hi Douglas,

    If you are trying to change the color of the data series then you can do it from the additional properties of the chart component instead. You can find a tab called Data Series in additional properties. Here you can change the color of each data series individually.

    Regards,

    Swapnil Koti

    Add a comment
    10|10000 characters needed characters exceeded

    • Former Member Tammy Powlas

      Actually I have a button which set a filter on the data source so both lines and circle on the legend need to be changed for the original colors:

      X = green
      Y = blue

      Z = red

      I was able to change the color the line, howerver I was not able to set circle on the legend.

      For exemple: When I click on the button to do the filter on X I have no problem because green is the first color on my chart properties, but when I click on the button to do the filter on Y both line and circle on the legend are green. I have to set this to blue, both line and circle on the legend. I was able to change the line accordingy but I am not able to change circle on the legend.

      I hope you got my point.

      Thanks and regards.

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.