Accumulation chart is out of the layout when it is created.

[TaeWook Kang]

Hi.

When the accumulation chart is first loaded, it is generated from a location outside the layout. However, if you reduce the size of the browser window, it will change normally. 

Please refer to the attached snapshot.

I'd appreciate it if you could give me an example to solve my problem.

I will also attach Html source.


@{
    ViewData["Title"] = "Home Page";
}


<div class="row">
    <div class="col-xl-9">
        <div class="row">
            <div class="col-xl-12">
                DESIGN BASIS
            </div>
        </div>
        <div class="row">
            <div class="col-xl-4">
                <div class="card">
                    <div class="e-card-header-title">
                        Rainfall intensity
                    </div>
                    <div class="card-body">
                        100
                    </div>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="card">
                    <div class="e-card-header-title">
                        Wind Speed
                    </div>
                    <div class="card-body">
                        100
                    </div>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="card">
                    <div class="e-card-header-title">
                        Seismic Site class
                    </div>
                    <div class="card-body">
                        100
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top:10px;">
            <div class="col-xl-12">
                <ejs-pdfviewer id="pdfviewer" serviceUrl="/api/Viewer" documentPath="sample plot Model.pdf" height="720px"></ejs-pdfviewer>
            </div>
        </div>
    </div>
    <div class="col-xl-3" style="border-left: 1px solid #cecece;">
        <div class="row">
            <div class="col-xl-12">
                INFORM STATUS
            </div>
        </div>
        <div class="row">
            <div class="col-xl-12">
                <ejs-accordion id="defaultAccordion" expandMode="Single">
                    <e-accordion-accordionitems>
                        <e-accordion-accordionitem expanded="true" header="Vertical Vessel" content="#Content_VV"></e-accordion-accordionitem>
                        <e-accordion-accordionitem header="Horizontal Vessel" content="#Content_HV"></e-accordion-accordionitem>
                        <e-accordion-accordionitem header="Heat exchanger" content="#Content_HE"></e-accordion-accordionitem>
                        <e-accordion-accordionitem header="API Pump" content="#Content_AP"></e-accordion-accordionitem>
                        <e-accordion-accordionitem header="Steel Structure" content="#Content_SS"></e-accordion-accordionitem>
                    </e-accordion-accordionitems>
                </ejs-accordion>
            </div>
        </div>
    </div>
</div>


<div id="Content_VV" style="display:none; width:auto; height:auto;">
    <ejs-accumulationchart id="Chart_VV" enableAnimation="false">
        <e-accumulation-series-collection>
            <e-accumulation-series dataSource="@ViewBag.ChartData" xName="xValue" yName="yValue" name="Vertical Vessel" startAngle="0" endAngle="360" innerRadius="70%" explode="true">
                <e-accumulationseries-datalabel visible="true" name="text" position="Outside">
                    <e-font fontWeight="500"></e-font>
                </e-accumulationseries-datalabel>
            </e-accumulation-series>
        </e-accumulation-series-collection>
        <e-accumulationchart-legendsettings visible="false"></e-accumulationchart-legendsettings>
        <e-accumulationchart-tooltipsettings enable="false"></e-accumulationchart-tooltipsettings>
    </ejs-accumulationchart>
</div>


<div id="Content_HV" style="display:none;">
    <div class="row" style="background-color:palegoldenrod; height:290px;">
        <div class="col-xl-12">
            1
        </div>
    </div>
    <div class="row" style="background-color: aquamarine; height: 290px;">
        <div class="col-xl-12">
            2
        </div>
    </div>
</div>


<div id="Content_HE" style="display:none;">
    <div class="row" style="background-color:palegoldenrod; height:290px;">
        <div class="col-xl-12">
            1
        </div>
    </div>
    <div class="row" style="background-color: aquamarine; height: 290px;">
        <div class="col-xl-12">
            2
        </div>
    </div>
</div>


<div id="Content_AP" style="display:none;">
    <div class="row" style="background-color:palegoldenrod; height:290px;">
        <div class="col-xl-12">
            1
        </div>
    </div>
    <div class="row" style="background-color: aquamarine; height: 290px;">
        <div class="col-xl-12">
            2
        </div>
    </div>
</div>


<div id="Content_SS" style="display:none;">
    <div class="row" style="background-color:palegoldenrod; height:290px;">
        <div class="col-xl-12">
            1
        </div>
    </div>
    <div class="row" style="background-color: aquamarine; height: 290px;">
        <div class="col-xl-12">
            2
        </div>
    </div>
</div>

Attachment: Chart_position_bug_ed2f3b15.zip

[Durga Gopalakrishnan]

Hi TaeWook, 

Greetings from Syncfusion. 

We suggest you to refresh the chart once it is loaded using below code snippet.  

<style>  

    .e-accumulationchart {      

        height: 100% !important; 

        width: 100% !important;  

    } 

</style> 

<script>  

document.addEventListener('DOMContentLoaded', function () {  

        var pieObj = document.getElementById('container').ej2_instances[0];       

        pieObj.refresh(); 

    }); 

</script> 

 

Please revert us if you have any concerns. 

Regards, 

Durga G 

[TaeWook Kang]

Thank you for your answer.

I added the code, but sometimes it comes out normally and sometimes it's still out of the layout. There is a 'window.onload()' function in 'Layout.cshtml', but may it conflict with the 'DOMContentLoaded' you told me?

If it is not related to the window.onload() function, why does the problem continue? I would appreciate it if you could let me know if there is any other way.

[Durga Gopalakrishnan]

Hi TaeWook,

Since control is not rendered at window.onload function, re-rendering the control is not possible. We suggest you to use dashboard layout created event to refresh the chart after panel is created. Please check with the below documentation link to use created event.

UG : https://ej2.syncfusion.com/aspnetcore/documentation/dashboard-layout/interaction-with-panels/moving-panels

Please let us know if you have any concerns.

Regards,

Durga G.