Chart in Tab rendering issue

[frederik]

I have charts in different tabs. The tabs that were not active when charts are created do not render the charts correctly. The parent containers all have the right sizes though. When resizing the browser windows the charts render again and correctly. I attach two screenshots:

1) how the charts look when tab activated for the first time (overlapping, axis a tad funny etc.)

2) after resizing the browser window the charts render correctly.

The same happens when another tab is activated again, the browser window resized and the tab with the chart activated again.

Attachment: Archive_3dc4cfc6.zip

[Baby Palanidurai]

Hi Frederik, 

  

Greetings from Syncfusion. 

  

We have analyzed your query. While in initial rendering, the height and width will be set to active tab, so that chart will inherit width from parent. When resizing the browser windows, the current tab chart will resize correctly, remaining tabs chart size will be based on the initial tab size. To overcome this, using selected event of tab control, chart can be refresh. We have prepared a sample with respect to this, here by using selected event, we have taken instance of the chart and refresh it.   

  

Please find the code snippet below to achieve this requirement, 

  

html: 

  

<ejs-tab id="tab_default" (selected)='onselected($event)'> 

                                           <e-tabitems> 

                                                          <e-tabitem [header]='headerText[0]'> 

                                                                        <ng-template #content> 

                                                                                      <div style='display:block' > 

                                                                                                     <ejs-chart #chart1> 

                                                                                                     </ejs-chart> 

                                                                                      </div> 

                                                                        </ng-template> 

                                                          </e-tabitem> 

                                                          <e-tabitem [header]='headerText[1]'> 

                                                                        <ng-template #content> 

                                                                                      <div style='display:block' > 

                                                                                                     <ejs-chart #chart2> 

                                                                                                     </ejs-chart> 

                                                                                      </div> 

                                                                        </ng-template> 

                                                          </e-tabitem> 

                                                          <e-tabitem [header]='headerText[2]'> 

                                                                        <ng-template #content> 

                                                                                      <div style='display:block' > 

                                                                                                     <ejs-chart #chart3> 

                                                                                                     </ejs-chart> 

                                                                                      </div> 

                                                                        </ng-template> 

                                                          </e-tabitem> 

                                           </e-tabitems> 

                             </ejs-tab> 

  

Component.ts: 

  

@ViewChild('chart1') public chart1: ChartComponent; 

@ViewChild('chart2') public chart2: ChartComponent; 

@ViewChild('chart3') public chart3: ChartComponent; 

  

public onselected(event) { 

    if (event.selectedIndex == 0) { 

      this.chart1.refresh(); 

    } else if(event.selectedIndex == 1) { 

      this.chart2.refresh(); 

    } else { 

      this.chart3.refresh(); 

    } 

  } 

  

Sample for your reference, can be found from below link, 

https://stackblitz.com/edit/angular-kb4kik-83jayj?file=app.component.html 

  

Kindly revert us, if you have any concerns. 

  

Regards, 

Baby.