Apexcharts.js: Less Padding/Margin for Pie/Donut Charts

[mburger81]

Is your feature request related to a problem? Please describe.
We use stencil-apexcharts for your charts. The charts look really good!!!

But in our opinion as described already in this issue #471 there are to margin/padding for your charts. for sure on pie and radialBar charts. If you have not a lot of space like on mobile devices you need to minimize paddings and margins.

The inner padding of an chart should be customizable, from there all charts (at least radialBar) made use of the container space allowed to it.

So we hope you can do some improvements on this point.

Thx

[junedchhipa]

What if you provide fixed height to the chart? Does it still have space?
Please post a codepen so I can try tweaking it through configuration options if it is achievable by it.

[mburger81]

Honestly all your examples have a fixed hight and I think/saw all your examples have the same behavior?
Like this which for the moment is our use case
https://apexcharts.com/javascript-chart-demos/radialbar-charts/semi-circle-gauge/

[junedchhipa]

Yeah, that looks like a lot of unwanted space :)
Currently, the radial-bar charts attempt to make the width/height equal resulting in a square (which is not what everyone would want).

I will look at how this can be controlled.

[mburger81]

Yes I think the chart should took the entire container. So customer can add padding or margin do container.
I think the square could be fine, but you should check parent element and use min between width and height.

[mikaelkaron]

As a "quick-fix" it's possible to set negative margins on the chart (if you have a container of some sort, probably with overflow: hidden)

[rinogo]

Cross-posting this here in case it helps someone who lands on this Issue.

Using a radialBar chart, we wanted to eliminate the top and bottom padding/margins. Using chart.offsetY helped a bit, but only for the top margin.

Inspired by this comment, I was able to crop out unnecessary top and bottom margins using negative values for grid.padding.top and grid.padding.bottom. You can do something similar with the left and right padding as well. My code ended up looking something like this:

            var options = {
                ...
                //Remove the excess padding (https://github.com/apexcharts/apexcharts.js/issues/1272#issuecomment-591388290)
                grid: {
                    padding: {
                        top: -20,
                        bottom: -15
                    }
                },
                ...
            };

Hope this helps! 😁

[kamaladenalhomsi]

@rinogo man you are a life saver! I've been struggling with this for a while