Semi Circle Guage - Taking undesirable height

[irshadahmed]

Codepen

Explanation

• What is the behavior you expect?
  Semi-circle guage should take the deisred height specified height of 'X' pixels.

• What is happening instead?
  If I need to plot a semi-circle gauge of height 'X' px, it takes almost '2X' px height. This leads to create lot of unwanted space in the bottom, which looks weird.

• What error message are you getting?
  No Error Message

Reference

Example:

[junedchhipa]

I am going to rewrite the radialbar/pie spacing code to minimize the unusual spacing taken in these charts.
PS. Thanks for the detailed description.

Related to #495

[JohnPettigrew]

I'd like to see this fixed, too, thanks! I'm putting together a dashboard using apexcharts and having a semicircular gauge be twice its required height is a bit annoying. A simple solution might be related to the forced insertion of a min-height attribute to the parent div - without this, we should be able to force the parent div to height the excess blank space by setting overflow: hidden. But intelligently working out the intended height from the start and end angles would be even better!

[live87]

Any ETA for this? Or at least an estimate. We are building big responsive app using many donut charts and with 100% width there is a lot of horizontal and vertical spacing that cannot be handled via CSS. Also axis padding has impact on this.

[JohnPettigrew]

FWIW, here's the SASS I'm using, which enables donut charts to be cropped (here, just cutting the bottom off for my speed-dial gauges). Obviously, use whatever heights work for your context! The key here is the !important markers, which I wouldn't usually use but allow the css to over-ride the values placed on the elements themselves by the apexcharts JS code.

#YOUR-CHART-ELEMENT-ID {
    min-height: 270px !important;
    overflow:hidden;

   .apexcharts-canvas {
      height: 270px !important;
   }
}

[junedchhipa]

ETA for this is around the 2nd week of June.