Fit the stock chart to my grid tile size

[Rodrigo AB]

Hi!!! now I'm programing a dashboard, and Im using angular material layouts to set each element in the screen. the problem is that my stock chart has an static dimension, so when I look my dashboard with my cellphone, the charts  stay with the same size as the web version. How can I resolve this?

    <mat-grid-list cols="3" rowHeight="1:1.4">

        

        <mat-grid-tile  colspan="1" rowspan="1" background='red'>

           <ejs-lineargauge (load)='load($event)' id='gauge' #gauge style='display:block;' [container]='Container' [axes]='Axes'>

        </ejs-lineargauge>

        </mat-grid-tile>

         <mat-grid-tile colspan="2" rowspan="1" background='red'>

2

        </mat-grid-tile>

        <mat-grid-tile colspan="3" rowspan="1" background='red'>

        

          <div class="control-section">

                <div>

                    <ejs-stockchart id='stockChartSpline' [enablePeriodSelector]='enable' [title]='title' [titleStyle]='titleStyle' [chartArea]='chartArea' [primaryXAxis]='primaryXAxis' style="display:block;" [tooltip]='tooltip' [crosshair]='crosshair' [primaryYAxis]='primaryYAxis'

                        [seriesType]='seriesType' (tooltipRender)='tooltipRender($event)' [indicatorType]='indicatorType' (load)='load2($event)'>

                        <e-stockchart-series-collection>

                            <e-stockchart-series [dataSource]='data1' type='Spline' xName='x' yName='high'>

                            </e-stockchart-series>

                        </e-stockchart-series-collection>

                    </ejs-stockchart>

                </div>

            </div>

        </mat-grid-tile>

        

         <mat-grid-tile  colspan="3" rowspan="1" background='red'>

4

        </mat-grid-tile>

      

      </mat-grid-list>

<br>

[Srihari Muthukaruppan]

Hi Rodrigo, 

  

We are analyzing your query and we will update the status within one business day(April 09, 2020). We appreciate your patience until then. 

  

Regards, 

Srihari M 

[Baby Palanidurai]

Hi Rodrigo, 

 

Thanks for your patience. 

 

We are analyzing your scenario and we will update you the status within one business days (13 April 2020). 

 

Regards, 

Baby. 

[Srihari Muthukaruppan]

Hi Rodrigo,

Greetings from Syncfusion. 

  

We have analyzed your query. From that, we would like to let you know that the chart 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). Hence we suggest you use the below workaround solution to achieve your requirement. In that, we have modified the style of the stock chart and its parent element to achieve your requirements. Based on your requirement we have also prepared a sample for reference. Please find below the code snippet and sample and screenshot.

  

Sample: https://stackblitz.com/edit/angular-ueq6vg-xaq2ca?file=app.component.html 

Code Snippet: 

// Add your additional code here 

<mat-grid-tile colspan="3" rowspan="1" background='red'>

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

                    <ejs-stockchart id='stockChartSpline' style="display:block; height: inherit !important" >

          // Add your additional code here

                    </ejs-stockchart>

                </div>

        </mat-grid-tile>

 

 

Screenshot: 

 

  

Let us know if you have any concerns. 

  

Regards 

Srihari M