We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Chart in Tab rendering issue

Thread ID:

Created:

Updated:

Platform:

Replies:

143624 Mar 29,2019 09:57 AM UTC Apr 2,2019 04:43 AM UTC Angular - EJ 2 1
loading
Tags: Chart
frederik
Asked On March 29, 2019 09:57 AM UTC

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 [Syncfusion]
Replied On April 2, 2019 04:43 AM UTC

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, 
  
Kindly revert us, if you have any concerns. 
  
Regards, 
Baby.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;