How to remove padding from 'stackedbar'?

[ethicalsector]

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!

[Priyanka M S]

@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

[ethicalsector]

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

[ethicalsector]

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?

[Priyanka M S]

@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

[ethicalsector]

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.

[Priyanka M S]

@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

[ethicalsector]

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?

[Priyanka M S]

@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

[ethicalsector]

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?

[Priyanka M S]

@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

[ethicalsector]

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?

[Priyanka M S]

@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

[ebrewer]

Was a way ever added to control padding of the chart area? i have the same issue, where i need to remove extra right-hand padding so the graph aligns with external columns.

[Indranil]

@ebrewer,

Can you please create a JSFiddle reproducing the issue you’re facing so that we can look into the code, understand it better and help you out?

___________
Indranil Deo
Team CanvasJS