I use the sidebar toggle but why does the kendo reaction chart always break or leave a space if the sidebar is enabled or closed

okay, so the case is I have a sidebar trigger where the sidebar component is created in another project or another repo (microfrontend), why if the sidebar is closed on the chart in kendo react chart it is cut off or leaves a space?

and this is an example of a truncated chart section

Hi Noor,

It seems that when the sidebar is collapsed, the two elements holding the Charts are expanded, which means that the initial width of the Chart components will be less that the new width of the containers.

This behavior can be observed in the following example if you click on the button:

• https://stackblitz.com/edit/react-pqedna?file=app%2Fmain.jsx

In order to resolve this, you can trigger the "resize" event of the "window" object, which will force the Chart to redraw:

const onClick = (ev) => {
    mainDiv.current.style.width = '500px';
    window.dispatchEvent(new Event('resize'));
  };

In your scenario, you can trigger the event after the sidebar is collapsed.

Hope this helps.