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?
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.
Please modify the above sample to replicate the reported scenario. It will be helpful for us to analyze further and assist you better.
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,
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>
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.
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)
await InvokeAsync(() => StateHasChanged());
Thank you for your help,
You're welcome. We are glad that your issue has been resolved. Please get back to us if you need any further assistance.