radialBar padding / margins?

[brandonburkett]

Radial bars seem to have white space around the actual chart. Is it possible to reduce this similar to how grid has padding options?

[junedchhipa]

Nope, if you provide chart.height, it should squeeze the radialBar based on available width/height ratio.

[brandonburkett]

Thank you. I was able to reduce some by using offsetY and a max-height container div (smaller than client.height).

<div style={{ maxHeight: '350px' }}>
  <Chart
    type="radialBar"
    series={[70]}
    options={{
      chart: {
        height: '400px',
      },
      plotOptions: {
        radialBar: {
          offsetY: -25,
          hollow: {
            size: '50%',
          },
        },
      },
      labels: ['Engagement'],
    }}
  />
</div>

Can close out this issue!

[junedchhipa]

Great! 👍

[mburger81]

We have the same problem, and think this is really an important feature.
The chart should fill the whole space available, the margin is really a lot, we would like use this chart in mobile use, it is nearly impossible use it there for that reason.

[brandonburkett]

My solution only worked for desktop :( It would take some responsible styles to get it to work for mobile.

Agreed it would be ideal if apex made use of the container space allowed to it.

[mburger81]

We are not an expert of canvas and svg, we had a look to source code and did some experiments.
But there is no way for us to figure out how we can implement such a thing in this technology :| To much effort for someone outside like us

[rinogo]

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! 😁

[van9petryk]

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.

Are you sure this is working for radialBar? Just tested not work. Can you provide some example (on stackblitz, codepen)?

[rinogo]

@van9petryk If you leave some kind of contact info here, I can privately send you an example.

[MrMooky]

Having issues with radialBar as well. The suggested workarounds don't really work for me. Because of the huge padding / margin, I am not getting this to work as needed. Here is what I want to end up with:

And this is where I'm at:

Width and height are set to 100, yet only the width is respected. The blue area is too big, compared to the actual chart. Also, the 2 strokes gets way too slim when the chart is that size. I tried to change the stroke width, but setting it to anything bigger than 3, the chart is not showing anymore.

[rumitr]

@MrMooky, did you figure it out?

[MrMooky]

@rumitr I don't really remember. But I think I switched to another library that generated SVG charts instead of using canvas.