CSS on SAP Design Studio

[Former Member]

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

[TammyPowlas]

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:

[Former Member]

sorry I didnt mentoin it.

I do need to change the circle on the legend.

Thanks

[Former Member]

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

[Former Member]

Thansk for your advice however I really need to change circle by css.

[TammyPowlas]

OK, please help us understand why Swapnil's suggestion would not work for you?  Why must it be CSS?

[Former Member]

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.