Skip to Content
avatar image
Former Member

Decrease bar size in bar charts (design studio 1.6)

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

13 Answers

  • Oct 23, 2016 at 09:44 AM

    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:

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Oct 23, 2016 at 09:58 AM

    hi Tammy

    Thanks for your reply . I am using regular chart

    Thanks

    Varun

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 23, 2016 at 04:05 PM

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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Oct 23, 2016 at 06:27 PM

    hi Tammy

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

    Thanks,

    Varun g

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Oct 23, 2016 at 06:31 PM

    Hi Tammy

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

    Thanks

    Varun

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 23, 2016 at 07:22 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Oct 24, 2016 at 05:13 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Oct 24, 2016 at 10:43 AM

    HI Venu/Tammy,

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

    did any faced this scenario?

    Thanks,

    varun

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Oct 25, 2016 at 09:56 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 25, 2016 at 10:10 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded