Skip to Content
3

Change Color Palette for Chart with CSS in Lumira Designer 2.0

Oct 26, 2017 at 02:10 PM

1.3k

avatar image

I wanted to change the standard Color Palette for the component Chart using CSS in Lumira Designer 2.0, but I did not succeed.

I customized my colors for the Chart columns in the Chart properties, but with some user actions (for example, when switching a Chart Type), colors automatically change to a standard palette. So I want to change them.

Standard Color Pallete for component Chart: https://experience.sap.com/fiori-design-web/v1-34/values-and-names/

And how change color pallete for the component Chart - Type = Heat Map?

And my situation ( After clicking on the icons, the color becomes standard, and initially it was as above.

I read a lot of articles on color change in DS 1.6, looked at classes in CSS, but I could not change the colors (

I try:

1)

#INFOCHART_COMPCODE_control_container .v-datapoint-group>g:first-child>g:last-child rect{

fill:#d3d3d3!important;

}

2)

.colChart g.v-column g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint {fill: #41477E;}

.colChart g.v-column g.v-datashape:nth-child(2) rect.v-datapoint.v-morphable-datapoint {fill: #BAC7F3;}

.colChart g.v-column g.v-datashape:nth-child(3) rect.v-datapoint.v-morphable-datapoint {fill: #990000;}

.colChart g.v-legend-content g.v-row.ID_0 path {Fill:#41477E;stroke:black;stroke-width:1px;}

.colChart g.v-legend-content g.v-row.ID_1 path {Fill:#BAC7F3;stroke:black;stroke-width:1px;}

.colChart g.v-legend-content g.v-row.ID_2 path {Fill:#990000;stroke:black;stroke-width:1px;}

3) And string from CSS, and !important and more..

color.png (93.3 kB)
error-color.png (68.3 kB)
error.png (32.1 kB)
10 |10000 characters needed characters left characters exceeded
Former Member

Hi Yulia,

since there hasn't been an answer yet: Did you find anything in the meantime? We are curious as well how this can be achieved.

Regards
Timo

0

Hi Timo,

No, we didn't find a solution to the problem and submitted an appeal to SAP. We wait.

Regards, Yulia

0

Hi Yulia,

You got any solution for the issue. I request to please update the thread if you have found the way of changing it.

Thanks,

Regards,

Arjun N

0

This is a main requirement, curious if a day SAP will deliver this :)

using Composites for Charts doesn't make any sense if the colours can be maintained to ensure corporate look!

i'm wondering why SAP is not able to enable this Option for Lumira designer whereas you can do it in Lumira Discovery!!!

they are using the same Chart engine.

0
* Please Login or Register to Answer, Follow or Comment.

5 Answers

Eva Schreider May 28 at 06:41 AM
2

Hi Guys,

i am struggeling with the same issue. As there is no way to change the standard palette, i changed the colors via CSS. Unfortunately the legend colors must be defined separatly. And as a result the order of the colors in the legend does not fit to the colors of my chart.

So if there will be an update please share.

BR,

Eva

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Feb 28 at 03:08 PM
1

The problem also occurs on Lumira Designer 2.1. I try to change default palette of Lumira Discovery, but not works.

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Mar 30 at 03:28 AM
1

Hi Guys,

I am also in the same boat. All the css codes in the different posts may have been working for old releases. Tried to use even copying code from inspecting mode. It is a nightmare. Just an example tried below css but nothing.

  1. /* Chart Type: Column Combination - Dual Axis, Swap Axes: true, All Measures on Both Axis Displayed as Bars */
  2. /* Assign custom css class to chart in DS: Your Chart > Display > CSS Class: customChart2 */
  3. /* adjust colors for measures displayed as bars */
  4. .customChart2 g.v-column g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint {fill: gold;}
  5. .customChart2 g.v-column g.v-datashape:nth-child(2) rect.v-datapoint.v-morphable-datapoint {fill: orange;}
  6. /* adjust colors for measures in the legend to match adjusted colors in the bars */
  7. .customChart2 g.v-legend-content g.v-row.ID_0 path {fill: gold;}
  8. .customChart2 g.v-legend-content g.v-row.ID_1 path {fill: orange;}

Can anyone from SAP help? if the codes/classes gonna change in every release how it will work :(

Share
10 |10000 characters needed characters left characters exceeded
Martin Lohmann May 30 at 04:45 AM
1

Same problem here on Lumira Designer 2.1. Migrated dashboards from Design Studio to Lumira 2.1, colors in charts changed, it seems at random, and no way to reset the color palette to our corporate colors. Please deliver a solution as in Design Studio or Lumira Discovery or provide a fast work around. Users wont accept adjusting chart colors every time they use the dashboard.

If anybody finds a workaround, css based whatsoever (SDK not available here though), any clue is welcome.

Best from Munich!

Show 2 Share
10 |10000 characters needed characters left characters exceeded

I just created a test class (my example changes the firts default color #cbae6 into black)


.test rect[fill="#5cbae6"]{fill: #000000;}

Asign the class to the chart, that worked for me.

0

Thanks, just tried but didn´t work here. Is that the precise spelling?

0
Yulia Melnik 5 days ago
0

Hi,

I created an incident in the SAP on this issue. As a result, I was answered from SAP:

"Unfortunately the Lumira Designer does not provide a way to customize the color palette."

Earlier I found the css code that changes the color of the columns and lines, but if the number of elements in the legend is reduced in filtering, then all the css code is useless.

I hope the technical support of SAP will change its mind and everything will allow the developers of Lumira Designer to change the standard color palette.

Share
10 |10000 characters needed characters left characters exceeded