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