Skip to Content
0

Decrease bar size in bar charts (design studio 1.6)

Oct 22, 2016 at 09:53 PM

623

avatar image

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

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

13 Answers

Tammy Powlas
Oct 23, 2016 at 09:44 AM
0

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:


1varun.jpg (48.4 kB)
Share
10 |10000 characters needed characters left characters exceeded
varun garaga Oct 23, 2016 at 09:58 AM
0

hi Tammy

Thanks for your reply . I am using regular chart

Thanks

Varun

Share
10 |10000 characters needed characters left characters exceeded
Tammy Powlas
Oct 23, 2016 at 04:05 PM
0

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

Share
10 |10000 characters needed characters left characters exceeded
varun garaga Oct 23, 2016 at 06:27 PM
0

hi Tammy

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

Thanks,

Varun g

Share
10 |10000 characters needed characters left characters exceeded
varun garaga Oct 23, 2016 at 06:31 PM
0

Hi Tammy

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

Thanks

Varun

Share
10 |10000 characters needed characters left characters exceeded
Tammy Powlas
Oct 23, 2016 at 07:22 PM
0

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

Share
10 |10000 characters needed characters left characters exceeded
Nithyanandam Venu Oct 24, 2016 at 05:13 AM
0

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

Share
10 |10000 characters needed characters left characters exceeded
varun garaga Oct 24, 2016 at 10:43 AM
0

HI Venu/Tammy,

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

did any faced this scenario?

Thanks,

varun

Show 1 Share
10 |10000 characters needed characters left characters exceeded

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

0
varun garaga Oct 25, 2016 at 09:56 PM
0

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


bar-css.png (42.1 kB)
Share
10 |10000 characters needed characters left characters exceeded
Tammy Powlas
Oct 25, 2016 at 10:10 PM
0

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.

Share
10 |10000 characters needed characters left characters exceeded