Decrease bar size in bar charts (design studio 1.6)

[Former Member]

HI Experts

I have used bar chart for one of my requirement . but i am getting huge bar. when i try to reduce bar size using CSS not reflecting in dashboard.

I have refered below blogs but not fulfil my requirement

https://archive.sap.com/discussions/thread/3759486

https://archive.sap.com/discussions/thread/3860882

https://blogs.sap.com/2015/04/22/list-of-css-for-sap-design-studio/

Please find the attached image

any help will be really appreciated

Thanks,

Varun

[former_member265529]

Hi varun,

From your screenshot, It seems you have added a dot before "g" at the beginning of class name. Can you remove it and try once in your CSS?

I haven't tried the css but I use the below to reduce all the bar size in chart.

g.v-datapoint rect

{height: 10px !important;}

Note: It doesn't work in IE.

Thanks,

Poovarasan

[former_member194504]

Hi Varun,

It seems worked fine for me. Just plot out your scenario more clearly.

Thanks,

Nithyanandam

[Former Member]

HI Tammy,

I tried venu suggestion as well but no luck . but i hope it should work for all browsers right ?

is there any bug?

because . some users might use fire fox and some might use internet explorer. this might cause issue. is there any solution for this?

Thanks,

Varun

[TammyPowlas]

Mine works on Chrome; I haven't tried it on Firefox.

Have you tried Nithyanandam's suggestion?

g.v-bar:nth-child(6) g.v-datashape rect.v-datapoint {height: 5px !important;}

I know in Chrome I can debut using F12; I don't know the commands for Firefox.

[Former Member]

HI Tammy,

I applied in my custom css file .Please find the image .and i am using Firefox browser

after applying also bar size remains same. is it a bug or i am going any wrong way. could you please point me in right direction

Thanks,

Varun

[Former Member]

HI Venu/Tammy,

Thanks for your reply. i tried with above css but no luck

did any faced this scenario?

Thanks,

varun

[TammyPowlas]

please show us where you are placing the CSS file and your full CSS - because it is working for me. Use the image icon to upload

[former_member194504]

Hi Varun,

This would work,

g.v-bar:nth-child(6) g.v-datashape rect.v-datapoint {height: 5px !important;}

on nth-child specify your bar you want to change,if you want the entire thing to be changed use this

g.v-datashape rect.v-datapoint {height: 5px !important;}

Thanks,

Nithyanandam

[TammyPowlas]

Varun - this CSS works for me:

g.v-bar g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint {height: 15px; !important}

Change the height as desired.

I recommend in the future using F12 when running your application so you can learn how Design Studio uses CSS

[Former Member]

Hi Tammy

Css as well I tried but no.luck.could you please guide me on this

Thanks

Varun

[Former Member]

hi Tammy

I tried but it was reducing chart size but not the bar

Thanks,

Varun g

[TammyPowlas]

The CHART component also has padding properties. Have you tried those?

[Former Member]

hi Tammy

Thanks for your reply . I am using regular chart

Thanks

Varun

[TammyPowlas]

Are you using an InfoChart? If you are using an InfoChart you could adjust the top and bottom padding as part of the properties as shown: