Chart width not changeing with window width on resize or opening and closing of toggle sidebar.

[Mr - Ammad]

i'm using charts with flexbox layout every thing works fine when website loads but on resize or sidebar open  the layout breaks. and when it breaks if i reload the page chart resize themself according to the window size which mean the chart width is not responsive i have added the canResize as true but still not responsive 

const primaryxAxis = { visible : false , rangePadding: 'None', canResize: true, };

[Swetha Babu]

Hi Ammad,

Greetings from Syncfusion.

We have considered the reported scenario as a bug and logged a defect report for the same. The fix for the reported scenario will be included in our weekly patch release which is expected to be rolled out on 9^th April, 2024. Please find the below feedback link to keep track of the reported scenario.

Feedback link: https://www.syncfusion.com/feedback/52120/the-chart-is-not-resized-properly-when-placing-it-in-the-flexbox-layout

If you have any more specifications/precise replication procedure to followed, please add it as a comment in the portal.

Regards,

Swetha

[Swetha Babu]

Ammad,

Thank you for your patience.

We can set the flex-container class to the chart and make the display CSS as important to resolve the reported scenario. We have created a react application to demonstrate the same. Please find the below stackblitz link for your reference.

Sample link: https://stackblitz.com/edit/react-p5c3nt-jmta7u?file=index.js,index.html

Code Snippet:

.flex-container {

        display: flex !important;

        justify-content: center;

        align-items: center;

        height: 100vh !important;

    }

 

<ChartComponent

          id="charts"

          className="flex-container"></ChartComponent>

Screenshot:

Kindly, revert us if you have any concerns.