Need help for Column Chart css to change the colors of the columns in Lumira Designer 2.0 SP1

[former_member533668]

Hello All,

I am using a Lumira designer 2.0 SP1 and chart type is Column Chart. I have two columns in the chart for Measure 1 and Measure 2. I would like to change the colors of the columns individually. right now I have a code provided by one of our valuable member and it is working for me as a group of columns.

.customChart1 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint rect{fill: #808080}

Even I wrote few other codes mentioned in other blogs which are not working.Here is the code which is not working

.customChart1 g.v-column g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint {fill: yellow !important;}

.customChart1 g.v-column g.v-datashape:nth-child(2) rect.v-datapoint.v-morphable-datapoint {fill: blue;}

.customChart1 g.v-legend-content g.v-row.ID_0 path {fill: yellow;}

.customChart1 g.v-legend-content g.v-row.ID_1 path {fill: blue;}

It would be helpful if I get a list of css classes for all the charts or as well as other components and also I would like to know how to identify a class for a component.

[former_member234401 · Accepted solution]

HI in Lumira Designer 2.0 and onwards you can configure the colors when configuring the chart

1) In properties choose chart configuring

2) click on properties and the click on the column you need to change the color of

Or you can use the conditional formatting component to define the color for the chart

either on a dimension or an measure

http://visualbi.com/blogs/sap-lumira-designer/conditional-formatting-sap-lumira-designer/

for key figures (measures) choose for all values instead of selecting a larger or smaller than - then it will always keep the color you define. I find this solution more persistent when changing dimension and measures in the chart via a script

Br

René

[former_member626361 · Accepted solution]

IF there is no data for Profit.. how to change the color for Profit

[former_member626361]

if there is no data initially in development, how can we change the color ?

[former_member533668]

Hello Rene,

Thanks for addressing my issue.

First part about using chart properties was known to me and I did that. But the conditional formatting was new to me. I will try that and let you know.

Apart from that, here I wanted to know the css script for the chart and use it instead of properties. Out of curiosity I am trying to find all the css classes for chart by right click on the dashboard - select inspect element. I found many classes but unable to use them. tried a lot of combinations to achieve this using css, but nothing is working for me. I would like to know what is the hierarchy like below.

.customChart1 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint rect{fill: #808080}

Please need help on understanding this better.

[former_member234401]

Hi I just tried to create a CSS for a column chart

.Chart g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(2) rect

{ fill: #ECECED!important;}

.Chart g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(3) rect

{ fill: #B9BABB!important;}

the nth.child(x) starts at 2 (that is the first column) do not know why it starts at 2 -- but is does, it might be different in your application - so a bit of bungy jumping amongst the numbers might be necessary

[former_member234401]

Just a bonus info .. other chart types (watherfall, bullet chart) normal 1.2.3 in the nth-child works a expected