Skip to Content

Change Color Palette for Chart with CSS in Lumira Designer 2.0

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)
Add comment
10|10000 characters needed characters exceeded

  • Hi Timo,

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

    Regards, Yulia

  • 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

  • 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.

  • Get RSS Feed

6 Answers

  • Best Answer
    Aug 31 at 12:01 PM

    Good afternoon, colleagues
    There is a note "2675021 - How to submit development requests for SAP Lumira Designer",
    on which it is possible to add requirements to the development of Lumir Designer.
    There is already a requirement for a color palette, but it is necessary that at least 10 companies of SAP customers vote for it.
    We left our voice, but that's not enough.
    If you are also interested in this revision, then please vote.
    References to these:

    https://influence.sap.com/sap/ino/#/idea/216995/?section=sectionDetails

    https://influence.sap.com/sap/ino/#/idea/216994/?section=sectionDetails

    There are also other useful improvements:
    1_ Chart “Bullet” there are no Data Label property https://influence.sap.com/sap/ino/#/idea/217134
    2_ Chart property-Enable Adhoc data comparison -must be included through the script in Lumira Designer

    https://influence.sap.com/sap/ino/#/idea/217132

    3_Change the name of the "Overall result" in the crosstab https://influence.sap.com/sap/ino/#/idea/216790/?section=sectionDetails
    4_Adding a tile component https://influence.sap.com/sap/ino/#/idea/216488
    5_Configuring the centering of components https://influence.sap.com/sap/ino/#/idea/216660/?section=sectionDetails
    6_Improvements for the Waterfall (Factor Analysis) chart https://influence.sap.com/sap/ino/#/idea/215554
    7_Improving cross-table formatting https://influence.sap.com/sap/ino/#/idea/215990

    8_ Export a Scorecard component to Excel

    https://influence.sap.com/sap/ino/#/idea/217408

    List of all offers (for voting) for improvement of Lumira Designer at https://influence.sap.com/sap/ino/#/campaign/1586/ideas-all/?
    The main screen with explanations for Lumira Designer under the link: https://influence.sap.com/sap/ino/#/campaign/1586

    Add comment
    10|10000 characters needed characters exceeded

  • May 28 at 06:41 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Feb 28 at 03:08 PM

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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Mar 30 at 03:28 AM

    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 :(

    Add comment
    10|10000 characters needed characters exceeded

  • May 30 at 04:45 AM

    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!

    Add comment
    10|10000 characters needed characters exceeded

  • Jul 13 at 09:57 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded