I have a scenario like, I need to do conditional formatting for BAR Chart. I have two values like positive and negative in Data source.
I'm going to customize the Info chart CSS, we have below colors,
- Positive are in Green
- Negative are in Red
let us define a default color for BAR will be "Green" in the "Additional Properties"
For Negative Color:
I found in run time, we have CSS class for negative value, Please find the below,
g.negative-datapoint
Using the above class I just created the custom CSS class to change the negative values in Bars.
CSS code
.
myBarRed g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group g.negative-datapoint rect {
fill: red !important;
}
After makes the changes my charts look like this, So Customer can able to see TOP10 products with high and low values at a time.