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

Hello,

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?


Thanks


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.


Regards,

Gopalakrishnan Veeraraghavan



BA Baptiste April 28, 2023 08:33 AM UTC

Hello,

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,

Baptiste


Attachment: CodeAndVideoExemple_95865335.zip


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

Baptiste,


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>

</div>




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

Hello, 

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,

Baptiste



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.

Regards,

Jayashree 


Loader.
Up arrow icon