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. Image for the cookie policy date

How to reinitialize chart (Chart Size issue)

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

4 Replies

DG Durga Gopalakrishnan Syncfusion Team 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 



SS Sathvik Subrahmanya 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


DG Durga Gopalakrishnan Syncfusion Team 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 



DG Durga Gopalakrishnan Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon