Apexcharts.js: 3.19.2 -> 3.19.3 Some Charts (Scatter/Bubble) not redrawing on parent resize.

[astone2014]

Is your feature request related to a problem? Please describe.
I'm having issues resizing scatter plot, bubble chart after upgrade from 3.19.2 -> 3.19.3.

Just by downgrading to [email protected] my scatter and bubble charts resize more as expected.

Describe the solution you'd like
Help me understand why I'm seeing this behavior with the version change.

Describe alternatives you've considered

• Manually redraw charts by listening to parent resize events.
• Sticking with 3.19.2 but that'd suck.

Additional context
Here is a gif of the behavior:

The wrapper for the chart

.grid-widget-container{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.grid-widget {
    flex: 1;
    box-sizing: border-box;
    padding: 0;
    height: 100%;
    min-height: 0;
    width: 100%;
    overflow: auto;
}

chart-wrapper {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

    <div class="grid-widget-container">
      <div class="grid-widget">
        <div class="chart-wrapper">
          <!-- chart display block -->
        </div>
      </div>
    </div>

[astone2014]

Here is 3.19.2 working as expected.

[junedchhipa]

Thanks for a detailed explanation, I can see the issue.
It will be addressed soon.

[junedchhipa]

Sorry, but can you reproduce this in a Codepen?
I am having trouble reproducing this.

[astone2014]

Sorry, but can you reproduce this in a Codepen?
I am having trouble reproducing this.

Here it is in codepen https://codesandbox.io/s/apx-line-basic-forked-9p5ks?file=/src/app/app.component.css

I made a line chart and scatter chart. Notice, when resizing the black boxes, line chart is good but not scatter.

[junedchhipa]

Thank you for providing a codesandbox.
This will be addressed soon.

[j-a-h-i-r]

I think I'm also facing a similar issue. I have a resizable div and the apexchart resides inside this div. When I resize the div, the apexchart does not resize to fit the div. But when I resize the browser window, apexchart resizes based on window size. Is this issue related with this bug?

Also, is there any API with which we can explicitly trigger resizing to fit the parents size? It would be nice to have.

Thanks for the great work on this beautiful library @junedchhipa

[j-a-h-i-r]

@astone2014 How are you generating the resizable containers? Is this part of ApexCharts or are you using something else?

[astone2014]

@astone2014 How are you generating the resizable containers? Is this part of ApexCharts or are you using something else?

Honestly I am using Gridster2 for my project but you can see same behavior in my Codepen using resize: both; css property.

[j-a-h-i-r]

I actually checked the link you provided but it contained only css, and I'm very bad at CSS. That's why I asked to be sure. Thanks for the link to Gridstar2. This seems promising

[simplecommerce]

Hi, are you guys experiencing the same problem still?
With the latest version, I am having resizing issues with bar charts, the pie charts work fine.

[astone2014]

Yes codepen still shows issues with 3.23.1.

https://user-images.githubusercontent.com/22425467/105073709-68172780-5a55-11eb-8fce-00dabcb43acb.mp4

[simplecommerce]

@astone2014 I forgot I wrote here, here is how I fixed my issue in react
https://github.com/apexcharts/react-apexcharts/issues/187#issuecomment-755299765

[junedchhipa]

Sorry for the delay.
The issue has been fixed and a new version will be released soon.

[astone2014]

I confirmed this is fixed in
"apexcharts": "^3.25.0"
thank you!

[j-a-h-i-r]

Thanks @junedchhipa for the awesome work!