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

This topic contains 12 replies, has 2 voices, and was last updated by  Priyanka M S 2 months, 3 weeks ago.

Viewing 13 posts - 1 through 13 (of 13 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

    #22291

    Is it possible to fix this design issue in another way? i.e. instead of trying to align the ‘stackedbar’ with the scale above, could we integrate a scale into the stackedbar? http://www.globalhungerindex.org/sierra-leone.html
    So, within the stackedbar, can we provide the values for each color?

    #22299

    Priyanka M S
    Member

    @ethicalsector,

    We will reconsider this behavior in our future releases, as we are working on some other features at this point in time.

    __
    Priyanka M S
    Team CanvasJS

    #22309

    Hi, I’m not asking about the padding now. I’m wondering how to add a legend to the graph itself? It seems to be impossible to align the legend separately, so we need to put the legend inside the graph, how could we do this?

    #22319

    Priyanka M S
    Member

    @ethicalsector,

    Legends are shown for dataSeries and not for dataPoints except pie, doughnut, funnel and pyramid charts.

    You can set the showInLegend property of dataSeries and dockInsidePlotArea property of legend to true to place the legends inside the plot area.

    __
    Priyanka M S
    Team CanvasJS

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

You must be logged in to reply to this topic.