vue-apexcharts
vue-apexcharts copied to clipboard
The chart does not occupy the entire width of the parent container when hiding / showing the sidebar
So, this is minimum working example on Sandbox.
I have aside panel. And per click button 'hide' I need hide this panel and show narrow line switcher. Chart on the right side page always need occupy all free space (Shrink / expand). But if refresh page and click 'hide' button in the first time chart will be same size. In my real project I have this problem. Chart after showing/hiding aside panel don't occupy all free space own parent container. It is float problem. In other case charts work correctly, in another - not. I have 2 chart on one page. One with bar type and other with line type. Bar type chart work fine, but line type graphics do not (Remains compressed). In this case, the container for graphics occupies the entire remaining width.
I noticed that this problem occurs most often when the graph has only one series of data, for example, one line.
How can I force the chart to occupy the entire width of the parent container.
I made a similar example with a sidebar using a css grid. Codesandbox Example. When you hide the sidebar, the chart expands to the width of the parent container. When a sidebar is displayed, the chart flies to the right outside the container.
same problem, need a fix