Edit: I actually figured this out by using a negative bottom margin that's half the height of the CircleGauge. I don't love it but it works.
When I manually set a height of 200px on a CircleGauge it properly fills its container.
However, adjusting the Axis to make a "half gauge" (startAngle=270, endAngle=90) leaves an ample amount of whitespace. My goal is to get this half gauge to fill its parent container.
I have tried setting the height of the CircleGauge to 100% and restricting its parent wrapper to 200px, but this causes the height to default to 450px and ignores the wrapper. I've also tried adjusting margins, setting the height to 50%, and as many variations of CircleGauge + wrapper configurations that I could think of, but I can't seem to get it to play nice.
This is the basic structure of my code. These settings default to a height of 450px
Based on the provided scenario, you can inherit the height of the parent div element to the Circular Gauge by setting “height” CSS style for the “e-circulargauge” class to render the Circular Gauge with same height as parent element. However, the spacing around the Circular Gauge can be reduced by setting the “allowMargin” property as “false”. The radius of the axis must be set to “100%” to occupy maximum space. Please find the code snippet for the same below.
<div class='wrapper' style="width:200px; height:200px">
<e-axis radius="100%" startAngle="270" endAngle="90">
height: inherit !important;
We have created a sample to demonstrate the same and it can be found from the below link.
Please let us know if the above solution meets your requirement.