Chart width after tab click

[Niño Guillermo]

Hi

My chart is not displaying the proper width after I go to another tab and then get back to the chart tab-pane again.

Please see the picture below

[Swetha Babu]

Hi Nino,

Greetings from Syncfusion.

We can render the chart based on the tab width by setting the Height and Width property of the Chart as 100%. Also, we can refresh the Chart component in the Selected event of the Tab Component. However, we have created a simple MVC application to demonstrate the same and it can be downloaded from the below link.

Sample link:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartTab-1927728287

Code Snippet:

@(Html.EJS().Tab("ej2Tab").Selected("tabSelect")

    .ContentTemplate(

    @<div>   

        <div class="e-content">

            <div>

                @(Html.EJS().Chart("ej2chart")

                    .Width("100%")

                   .Height("100%")

                    .Series(series => {

                        series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Area).

                        Marker(mr => mr.Visible(true)).

                        XName("x").

                        YName("y").

                        DataSource(ViewBag.dataSource).

                        Name("Gold").

                        Width(2).Add();

                    })

                    .PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category))

                    .Title("Olympic Medal Counts - RIO")

                    .Render()

                )

            </div>

       </div>

    </div>

    )

    .HeightAdjustMode(HeightStyles.Content)

    .OverflowMode(OverflowMode.Scrollable)

    .Render()

)

 

<script>

    var tabSelect = function (args) {

        var chart = document.getElementById("ej2chart").ej2_instances[0];

        chart.refresh();

    }

</script>

 

Screenshot:

Kindly, revert us if you have any concerns.

Regards,

Swetha