Accumulation chart initial sizing on Dashboard layout

[Michael Aston]

The accumulation charts when used in a dashboard tile initially sizes outside the bounds of the tile overwriting adjacent tiles. See attached video.

        <SfAccumulationChart EnableBorderOnMouseMove="false" EnableSmartLabels="true" Width="100%" Height="100%" @ref=@AccumulationObj>

            <AccumulationChartEvents OnExportComplete=@GetChartImage Loaded=@OnLoadedAccumulation TooltipRender="TooltipRender"></AccumulationChartEvents>

            <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>

            <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>

            <AccumulationChartSeriesCollection>

                <AccumulationChartSeries [email protected] XName="Response" YName="Value" Name="Responses" PointColorMapping="SliceColour" StartAngle="60" InnerRadius="0%">

                    <AccumulationChartAnimation Enable=@AccumlationAnimation />

                    <AccumulationDataLabelSettings Visible="true" Name="Response" Position="AccumulationLabelPosition.Outside"></AccumulationDataLabelSettings>

                </AccumulationChartSeries>

            </AccumulationChartSeriesCollection>

        </SfAccumulationChart>

<style>

.e-chart {

        width: inherit !important;

        height: inherit !important;

}

.e-accumulationchart {

        width: inherit !important;

        height: inherit !important;

    }

</style>

Attachment: 20210706_11h42_35_26b0f7b0.zip

[Durga Gopalakrishnan]

Hi Michael, 

Greetings from Syncfusion. 

We request you to render the chart once dashboard layout is rendered using Created event. We have prepared sample based on your requirement. Please check with below snippet and sample. 

<SfDashboardLayout> 

    <DashboardLayoutEvents Created="Created"></DashboardLayoutEvents> 

        <DashboardLayoutPanels> 

                   <DashboardLayoutPanel Id="Panel1"> 

                            <ContentTemplate> 

                                @if (initial) 

                                { 

                                <div style="height:100%; width:100%;"> 

                                    <SfAccumulationChart></SfAccumulationChart> 

                                </div> 

                                } 

                            </ContentTemplate> 

                    </DashboardLayoutPanel> 

      </DashboardLayoutPanels> 

</SfDashboardLayout> 

@code{ 

  public bool initial { get; set; } 

  public void Created() 

    { 

        initial = true; 

    } 

} 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartRerender-285332384.zip 

Please revert us if you have any concerns. 

Regards, 

Durga G

[Michael Aston]

This is better. Is a permentant fix for this scheduled?

[Durga Gopalakrishnan]

Hi Michael, 

We will check this and update the details within two business days(22^nd July 2021). We appreciate your patience until then. 

Regards, 

Durga G

[Durga Gopalakrishnan]

Hi Michael, 

We have already logged a feature request on “To change architecture of Dashboard layout”. This feature will be included in our upcoming Volume 3 Main Release which is expected to be rolled out at end of September 2021. You can keep track of the feature from the feedback portal below.  

  

Feedback Link : https://www.syncfusion.com/feedback/26638/ 

  

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.  

 

Regards, 

Durga G 

[Durga Gopalakrishnan]

Hi Michael, 

Currently, we have not provided support to render completely before the OnAfterRender Razor life cycle method. This feature will be included in any one of our upcoming releases. Generally, we will plan features based on customer count, feature rank, and wish list plan for some features.  Since we do not face any major problems with other components rendering with Dashboard Layout panels, we suggest you to use the provided work around.  

  

We will update the status in the feedback once it is planned for any one of the upcoming releases.  

  

https://www.syncfusion.com/feedback/26638/the-dashboardlayout-component-is-not-rendered-completely-before-the-onafterrender 

Kindly revert us if you have any concerns. 

Regards, 

Durga G 

[Bruce]

You can add my vote to have this fixed!  :)  And thank you for posting the workaround.

[Bruce]

Hello, I'm having the same problem and the fix is no longer working.  As soon as I resize the browser window it snaps into place just fine.

[Durga Gopalakrishnan]

Hi Bruce,

We have ensured the reported scenario in latest version with chart and accumulation chart. Charts are resized properly based on parent element size at initial rendering and also while resizing the browser window. We have attached the tested sample and screenshots for your reference.

Initial Rendering

After Window Resize

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

If you are still facing problem, please try to replicate an issue in above sample or share us issue reproduced sample to validate this case further from our end.

Regards,

Durga Gopalakrishnan.