Update chart automatically after change widget size

[Ton That Hung]

Hi Syncfusion Team,

I'm using the Chart component and I want to update the chart after the widget's width is changed.

Link sample: https://stackblitz.com/edit/react-xvj75t-usn3tw?file=index.js

In my example, I have a sidebar and a chart. The sidebar is able to expand/collapse. So, the width of the graph can be changed. By default, the chart won't be updated after the width changes(the image below). How to configure the chart can be updated after expanding/collapsing the sidebar.

Reality: 

Expected: 

I'm looking forward to your response.

Thanks.

[Gopalakrishnan Veeraraghavan]

Hi Ton That Hung,

We achieved this by refreshing the chart when the toggle button's width was updated. Please refer to the code snippet below. Additionally, we have provided a sample for your reference.

[index.js]

let chart = React.createRef();

 

React.useEffect(() => {

    chart.current.refresh();

  }, [isOpen]);

 

<ChartComponent ref={chart}

    </ChartComponent>

Sample: https://stackblitz.com/edit/react-xvj75t-ut9fao?file=index.js

We hope this information helps you in resolving your concern. If you have any further queries or require further assistance, please let us know.

Regards,

Gopalakrishnan Veeraraghavan

[Ton That Hung]

Hi Gopalakrishnan Veeraraghavan,

Thanks for your solution.

[Nishanthi Panner Selvam]

Ton,

Most Welcome! Please get back to us if you need further assistance.

Regards,

Nishanthi