Chart appearance problem in using tab

[alonekjco]

Hi

  I have several charts on a page and I have used tabs.

When the page loads, the first (active) tab of the correct chart is displayed. But in other tabs, the charts cover half of the page and are not complete.

Using the following code, the problem of showing charts is solved. But the user must click on a key in each tab to display the chart correctly.

   var chartObj = document.getElementById(chartname).ej2_instances[0]; // to create chart instance  

   chartObj.refresh();

For example, in the image below, the chart is not displayed correctly and by clicking the   refresh00055    button, the chart is displayed correctly.

After clicking the   refresh00055    button

How can this problem be solved?

[Durga Gopalakrishnan]

Hi Alonekjco, 

We request you to use tab control selected event to refresh the chart while choosing the tab. We have prepared sample based on your requirement. Please check with the below snippet and screenshot. 

<ejs-tab id="defaultTab" selected="onTabSelect"> 

</ejs-tab> 

<script> 

    function onTabSelect(args) { 

        var chartObj = document.getElementById("container").ej2_instances[0];  

        chartObj.refresh();  

        var chartObj1 = document.getElementById("container1").ej2_instances[0];  

        chartObj1.refresh();  

    } 

</script> 

 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartInTabs-1882828422.zip 

Kindly revert us if you have any concerns. 

Regards, 

Durga G