Skip to Content
3
Oct 26, 2017 at 02:10 PM

Change Color Palette for Chart with CSS in Lumira Designer 2.0

7107 Views

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

Attachments

color.png (93.3 kB)
error-color.png (68.3 kB)
error.png (32.1 kB)