Impossible to set the height in percentage

[Aurelien]

Hi,

I have a circular gauge which works perfectly, except the height in percentage:

<div style="height:300px">

    <ejs-circulargauge style="display: block;" height="50%">

        <e-axes>

            <e-axis minimum='0' maximum='100'>

                <e-pointers>

                    <e-pointer value='50'></e-pointer>

                </e-pointers>

            </e-axis>

        </e-axes>

    </ejs-circulargauge>

</div>

My div is in 300 px but my gauge is always 450px.

Thanks a lot

[Indumathi Ravi]

Hi Aurelien, 

Thank you for contacting Syncfusion support. 

The reported height issue in the Circular Gauge can be resolved by inheriting the height of the parent element using the height CSS style with the "e-circulargauge" class. Please find the code snippet below. 

Code Snippet: 

[app.component.html] 

<div style="height:300px"> 

    <ejs-circulargauge style="display: block;" height="50%"> 

        <e-axes> 

            <e-axis minimum='0' maximum='100'> 

                <e-pointers> 

                    <e-pointer value='50'></e-pointer> 

                </e-pointers> 

            </e-axis> 

       </e-axes> 

    </ejs-circulargauge> 

</div> 

<style> 

  .e-circulargauge { 

        height: inherit !important; 

   } 

</style> 

We have created a sample to demonstrate the same and it can be found from the below link. 

https://stackblitz.com/edit/angular-yc2cbw-bukg8s?file=app.component.html 

Please let us know if you need any further assistance. 

Regards, 

Indumathi R