How to reinitialize chart (Chart Size issue)

[Sathvik Subrahmanya]

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. 

CDN: https://cdn.syncfusion.com/ej2/dist/ej2.min.js

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

Thanks in advance

[Durga Gopalakrishnan]

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 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartSize505076760.zip 

 

Kindly revert us, if you have any concerns. 

 

Regards, 

Durga 

[Sathvik Subrahmanya]

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]

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 7^th January, 2020. 

 

Kindly revert us, if you have any queries. 

 

Regards, 

Durga G 

[Durga Gopalakrishnan]

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 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Chart-1018497770.zip 

 

Kindly revert us, if you have any concerns. 

 

Regards, 

Durga G