Dynamic height of Circular Gauge in a Dashboard Layout

[Mark]

I am sure I am missing something, but when we use the dashboard layout and use the circular gauge, if we set the height and width to 100%, the width is perfect for a panel but the height goes way too big.  There is a huge amount of white space - above and below - the rendered chart.  As we need the charts to be responsive, we can't set a pixel height.  How do you make the gauge take up the full space of the dashboard content?  As the below code fits the width, but makes the gauge display about halfway down in the panel and stretches beyond the panels bottom.

<div class="e-panel-container">
    <div class="e-panel-header">Office 1</div>
    <div class="content"><div id="office1Gauge"></div></div>
</div>

var office1Gauge = new ej.circulargauge.CircularGauge({
    height: '100%',
    width: '100%',

[Srihari Muthukaruppan]

Hi Mark,  

We have analyzed your query. From that, we would like to let you know that the circular gauge is responsive with respect to the width and height of its parent element, if its zero, then it will render with its default size(600 * 450). we suggest you to use below to get parent element size. In that we have set the height and width of circular gauge as 100%  in dashboard layout as mentioned to achieve your requirement. Based on your requirement we have also prepared a sample for reference. Please find below code snippet and sample.  

  

Sample: https://stackblitz.com/edit/etva8j?file=index.js 

 

Code Snippet:   

    

 var dashboard = new ej.layouts.DashboardLayout({ 

         // add additional code here   

        panels: [{ 

            'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, 

            header: '<div>Circular Gauge</div>', content: '<div id="gauge" style="height:100%; width:100%"></div>' 

        }] 

    }); 

    dashboard.appendTo('#defaultLayout'); 

  

Screenshot:   

   

Kindly revert us, if you are still facing any issues. 

 

  

Regards  

Srihari M   

[Mark]

That resolved that!  Thank you!

[Srihari Muthukaruppan]

Hi Mark,  

Most welcome. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   

   

Thanks,   

Srihari M