Skip to Content
Author's profile photo Vidhya V

Changing BAR colors – SAP Design Studio 1.6

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,

  1. Positive are in Green
  2. 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,


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.


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo jing zhang
      jing zhang

      it’s great.I can change the svg color by myselfe now.but can you tell me how can I set the color different by values? I just can get get demission in this code,DS_3.getMembers(“ZTHRQ”, 100000); how can I get messure value?

      Author's profile photo Vidhya V
      Vidhya V
      Blog Post Author

      Hi Jiing,


      Are you asking in CSS or Script level?


      Author's profile photo Former Member
      Former Member

      Hi Vidhya,


      Can you please share the CSS script u used and also is it possible to apply different color when you have multiple categories as below.






      Author's profile photo Vidhya V
      Vidhya V
      Blog Post Author

      Hi Prakash,


      Please check the below link,