Responsive Linear/Radial Gauage

[Shivani Bhilare]

How can I make Linear and Circular gauge responsive? Chart to fit into panel size

Thanks,

Shivani

[Indumathi Ravi]

Hi Shivani,

Thank you for contacting Syncfusion support.

If we want the gauges to be responsive, we must set width and height of the parent div element to "100%" and also set circular gauge and linear gauge component "width" and "height" to "100%". The '.e-circulargauge' and '.e-lineargauge' classes inherit the width and height of the parent element. Then, in the dashboard layout component's "resizeStop" event, including the component's "Refresh()" method as well. Please see the code snippet below.

Code Snippet: 

[app.component.html]
</ejs-dashboardlayout (resizeStop)="onResizeStop($event)"> 

//.. 

<ejs-lineargauge style='display:block;' width='100%' height=' 100%'></ejs-lineargauge> 

//.. 

  

//.. 

<ejs-circulargauge style='display:block;' width='100%' height='100%'></ejs-circulargauge> 

//.. 

</ejs-dashboardlayout> 

  

<style> 

.e-circulargauge { 

      width: inherit !important; 

      height: inherit !important; 

 } 

 .e-lineargauge { 

        width: inherit !important; 

        height: inherit !important; 

} 

</style>

[app.component.ts]

onResizeStop(args: any) { 

     //.. 

      gaugeObj.refresh(); 

      //..
} 

  

We have created a simple sample and it can be found at the stackblitz link below. 

https://stackblitz.com/edit/angular-gochbl-zzhjzh?file=app.component.html 

Please let us know if you need any further assistance. 

Regards,
Indumathi R.