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

Update Graphic size


I have created a graphic by setting a size of Height="520px" Width="950px". But the size of the graphic is not updated directly, I have to do an action on the page (for example click on a button, check a checkbox ...) for the size to adapt (see image).

Graphic when I arrive on my page

graphic after clicking on the "Clearance" checkbox

Would you have a solution to update the size of the graphic when I arrive on the page?


5 Replies

GV Gopalakrishnan Veeraraghavan Syncfusion Team April 27, 2023 03:46 PM UTC

Hi Baptiste,

We have analyzed your reported scenario. From that, we would like to let you know that we initially render the chart with custom height and width, and then update the height and width through a button click, so it can be rendered with the new dimensions. Unfortunately, we are unable to reproduce the reported issue. Please kindly provide a sample for that it will be helpful from us. We have attached a sample and video for your reference. Please find below sample which is used by testing.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HeightAndWidth-1823262869.zip

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HEIGHT~11664184552.zip

Please modify the above sample to replicate the reported scenario. It will be helpful for us to analyze further and assist you better.


Gopalakrishnan Veeraraghavan

BA Baptiste April 28, 2023 08:33 AM UTC


Thank you for your reply

Here is a video and my code, so you can see the problem.

In fact, when I arrive on my page, the graphic is not displayed correctly (see video) I have to do an action, press a button, check a checkbox, select ... So that the graphic is displayed correctly with the right size, and in full.

I just want the graphic to display correctly and in the right size when I arrive on my page.

Thank you for your help,


Attachment: CodeAndVideoExemple_95865335.zip

DG Durga Gopalakrishnan Syncfusion Team May 1, 2023 12:01 PM UTC


We are unable to recreate the sample with attached snippet alone, since data is obtained from another service. However, we have created a simple line chart sample with your specified height and width. Chart is displayed with specified size at initial rendering itself. We have attached the screenshot and sample for your reference.

<div class="chart" style="height: 520px; width: 950px;">

<SfChart Height="520px" Width="950px"></SfChart>


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

As per your attached snippet, it seems to be you are using style for each div container. Please ensure whether chart is rendered with specified CSS styles. By default, when height and width is not specified for chart control, then its parent element size will be inherited automatically. When specifying size in pixel, it won’t be changed on resizing.

Kindly revert us if you have any concerns.

BA Baptiste May 2, 2023 07:37 AM UTC


I managed to solve my problem by calling the StateHasChanged() method after rendering the graph on the page.

protected override async Task OnAfterRenderAsync(bool firstRender)


        if (firstRender)


            await InvokeAsync(() => StateHasChanged());


Thank you for your help,


JS Jayashree Suresh Anand Syncfusion Team May 3, 2023 06:47 AM UTC

Hi Baptiste,

You're welcome. We are glad that your issue has been resolved. Please get back to us if you need any further assistance.



Live Chat Icon For mobile
Up arrow icon