Charts are not rendering using component

[RakhiS]

Hi,

I have used this link:

https://ej2.syncfusion.com/angular/demos/?_ga=2.157598202.1966388303.1583080850-1269584194.1546257015#/material/dashboard-layout/analytics-dashboard

and tried its stackb blitz code, now in this I want to renderthe graphs from the components. This time I am able to render the card from component. But not able to disable the chart (ejs-chart or accumulationchart). Please help me by sharing sample from where any one of the graph let say Piechart is rendering using component into the page.

Thanks in advance

[Sowmiya Padmanaban]

Hi RakhiS,  

 

Greetings from Syncfusion support. 

 

We have checked your reported query. We suspect that your requirement is to render the pie chart inside the DashboardLayout component. 

 

By default, DashboardLayout is rendered based on parent element dimension. So, set the width and height as 100% for parent element. 

 

Refer the below code snippet. 

<ng-template #content> 

        <!--dashboardlayout is render based on parent element dimension. so set the width and height as 100% --> 

        <div id="pie" style="width:100%;height:100%"> 

             <!--render the pie chart --> 

          <ejs-accumulationchart id="pieChart" height="100%" width="100%" [legendSettings]="legendSettings" 

            [tooltip]='tooltip'> 

            <e-accumulation-series-collection> 

              <e-accumulation-series [dataSource]="piechart" xName="x" yName="y" innerRadius="20%" 

                name="Browser" [dataLabel]='datalabel'> 

              </e-accumulation-series> 

            </e-accumulation-series-collection> 

          </ejs-accumulationchart> 

        </div> 

      </ng-template> 

  <style> 

    .e-accumulationchart { 

      width:100%; 

      height:100%; 

    } 

 </style> 

 

Refer the below sample link. 

https://stackblitz.com/edit/angular-xiq4me?file=index.html 

 

Unfortunately we are unable to get your exact requirement with your provided information. If the provided solution does not met your requirement, then can you please share the detailed information regarding your requirement. It will helpful for us to resolve your issue at earliest. 

1.      Exact requirement. 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P