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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to reinitialize chart (Chart Size issue)

Thread ID:

Created:

Updated:

Platform:

Replies:

150178 Dec 23,2019 09:08 PM UTC Jan 8,2020 10:44 AM UTC ASP.NET Core - EJ 2 4
loading
Tags: Charts
Sathvik Subrahmanya
Asked On December 23, 2019 09:08 PM UTC

I have bootstrap tabs and charts on each of the tab. I have noticed that chart size will be 100% only on the initial active tab. If I click on the other tabs, charts are not rendered in full size until window size is changed manually either by resizing the chrome or pressing F12 for inspect element. How do I fix this issue? 

Tried Solutions:
Tried putting each tab content to different partial views and loading it on clicking the tab. 
Tried to reinitialize the chart on click of tab. (redraw, refresh,..etc - none of them works). I get an error redraw is not a function

We are using ASP.NET Core version of charts as our application is .NET CORE 2.0. 
We are using EJ2 and I am not finding any solutions for this anywhere. 

If anyone can help me on this, it would be really appreciated. 

Thanks in advance

Durga Gopalakrishnan [Syncfusion]
Replied On December 24, 2019 11:48 AM UTC

Hi Sathvik, 
 
We have validated the reported problem at our end. From that, we suggest you to use content template to render the chart inside the Tab component and set “heightAdjustMode” property value as “fill” to overcome your problem. We have prepared a sample for your reference. Please find the sample and code snippet below. 
 
Code Snippet 
 
<ejs-tab id="ej2Tab" heightAdjustMode="Fill"> 
    <e-tab-tabitems> 
        <e-content-template> 
            <div> 
                <div class="e-tab-header"> 
                    <div>Line</div> 
                    <div>Area</div> 
                    <div>Column</div> 
                </div> 
                <div class="e-content"> 
                    <div> 
                        <ejs-chart id="container"> 
                             //… 
                       </ejs-chart> 
                    </div> 
                    <div> 
                        <ejs-chart id="container1"> 
                             //… 
                       </ejs-chart> 
                    </div> 
                    <div> 
                        <ejs-chart id="container2"> 
                            //… 
                       </ejs-chart> 
                    </div> 
                </div> 
            </div> 
        </e-content-template> 
    </e-tab-tabitems> 
</ejs-tab> 
<script> 
    var chartParentDisplay; 
    function chartLoad(args) { 
        var parent = args.chart.element.parentElement; 
        chartParentDisplay = parent.style.display; 
        parent.style.display = (chartParentDisplay == "none") ? "block" : chartParentDisplay; 
    } 
    function chartLoaded(args) { 
        args.chart.element.parentElement.style.display = chartParentDisplay; 
        args.chart.loaded = null; 
    } 
</script> 
 
Screenshot 
 
Initial Line chart 
Navigating to Area Chart 
 
 
 
Sample 
 
Kindly revert us, if you have any concerns. 
 
Regards, 
Durga 


Sathvik Subrahmanya
Replied On December 24, 2019 05:25 PM UTC

Hi Durga,


I looked into your solution. I modified your solution by adding one more tab as 'Test' and added content with one of my chart. This chart contains tooltip, primaryaxis,..etc. As soon as I add this chart in the solution it is not working. I am getting error (ArgumentException: Object of type 'Syncfusion.EJ2.Charts.ChartTooltipSettings' cannot be converted to type 'Syncfusion.EJ2.Navigations.TabTabItem'.). Please find the attached solution file with my edits. Please let me know how I can fix that error. Am I missing any reference? Please help!

Thanks,
Sathvik

Attachment: ChartSize505076760_Edited_6d345bd4.zip

Durga Gopalakrishnan [Syncfusion]
Replied On December 30, 2019 11:58 AM UTC

Hi Sathvik, 
 
We have analyzed your query. We were able to reproduce an issue with the provided sample and we have reported this issue to the concern team to address. Hence we will update the patch in next patch release on 7th January, 2020. 
 
Kindly revert us, if you have any queries. 
 
Regards, 
Durga G 


Durga Gopalakrishnan [Syncfusion]
Replied On January 8, 2020 10:44 AM UTC

Hi Sathvik, 
 
We suggest you to use the below workaround sample to resolve the reported issue in previously suggested solution. We have prepared sample based on your requirement. Please check with the below code snippet and sample. 
 
Code Snippet 
Index.cshtml 
<ejs-tab id="ej2Tab" heightAdjustMode="Fill"> 
    <e-tab-tabitems> 
        <e-tab-tabitem header="ViewBag.headerText0" content="#Chart1"></e-tab-tabitem> 
        <e-tab-tabitem header="ViewBag.headerText1" content="#Chart2"></e-tab-tabitem> 
    </e-tab-tabitems> 
</ejs-tab> 
<div id="Chart1" style="display:none"> 
    <ejs-chart id="container"> 
        //… 
    </ejs-chart> 
</div> 
<div id="Chart2" style="display:none"> 
    <ejs-chart id="container1"> 
        //… 
    </ejs-chart> 
</div> 
 
HomeController.cs 
public IActionResult Index() 
{    
   //… 
   ViewBag.headerText0 = new TabHeader { Text = "Line" }; 
   ViewBag.headerText1 = new TabHeader { Text = "Column" }; 
   ViewBag.dataSource = chartData; 
   return View(); 
} 
 
Screenshot 
 
 
 
Sample 
 
Kindly revert us, if you have any concerns. 
 
Regards, 
Durga G 


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

Live Chat Icon For mobile
Live Chat Icon