Home forums Using CanvasJS How to remove padding from 'stackedbar'?

This topic contains 8 replies, has 2 voices, and was last updated by  Priyanka M S 3 days ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #21764

    Is it possible to remove the padding around the chart container here: https://jsfiddle.net/7pr96ozq/9/
    The indexlabels are not required but the chart must be true 100% width in order to align correctly with the diagram above it here: http://www.globalhungerindex.org/results-2017/chad.html

    Is it possible to make this full-width – NO padding? I’m happy to buy the licence to remove the ‘non-commercial’ credit if that helps!

    #21768

    Priyanka M S
    Member

    @ethicalsector,

    When you set tickThickness to zero tick will still occupy space(pixels). Instead setting tickLength: 0 should work fine in your case. Please take a look at this jsfiddle.

    __
    Priyanka M S
    Team CanvasJS

    #21769

    Hi, I added the setting, but it’s still not looking as required – there is lots of padding to the left and right. I can fix the top padding by setting a negative top margin but I can’t get rid of the left and right padding with CSS: http://www.globalhungerindex.org/sierra-leone.html

    #21770

    In your fiddle the credit is within a larger container in the bottom right corner, but the barchart should be full 100% width – the credit should not be outside. Am I explaining clearly?

    #21785

    Priyanka M S
    Member

    @ethicalsector,

    You can increase chart width and set negative padding.
    Setting width: 103%; margin-left: -14px !important to the chartContainer should work fine. Please take a look at this screenshot.

    __
    Priyanka M S
    Team CanvasJS

    #21787

    Hi Priyanka,
    thanks for your reply. Unfortunately, I tried this already, but it doesn’t work because the website is fully responsive. The layout adjusts according to screensize, and the width of the container is based on percentages, not on pixels. Therefore, we cannot compensate for this unwanted padding with negative margin-left in pixels, unless we make an infinite number of ‘media queries’ for every screensize, which would be a huge undertaking, and slow the website down considerably. The much cleaner solution is to simply remove this completely unnecessary padding, which is what I was hoping was possible by posting in this forum. As in the example page, the graph must align EXACTLY and this is only possible if we can make the graph full-width with no padding. Otherwise, we cannot use CanvasJS and I think that would be a great shame, for such a silly reason as unwanted padding.

    #21802

    Priyanka M S
    Member

    @ethicalsector,

    By default, every element of chart has padding of some pixels to enhance the look and feel. We will reconsider to enhance this behavior in future releases.

    __
    Priyanka M S
    Team CanvasJS

    #21826

    Can you tell me what the padding is, so that I can match it to the grid I need to align to it? How many pixels top, right, bottom, left?

    #21868

    Priyanka M S
    Member

    @ethicalsector,

    Padding is considered at the time of rendering and it varies from element to element. Padding applied to the elements are dependent on each other, hence it is not possible to control padding for one element externally and expect the other elements to be aligned properly.

    We will reconsider this behavior in our future releases.

    __
    Priyanka M S
    Team CanvasJS

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.