Charts: Resize issues when used in a widget

[volante007]

Describe the bug
Some charts do not resize/refresh themselves correctly when used inside a widget on a homepage. We've seen various issues related to this, but now I took some time to reproduce it in a clear way.

Typical scenario
A chart is quite commonly used in a double width widget (or wider). When such a widget shrinks its column width, some charts do not update correctly.

Seems to work fine: Bar, line
Resize issues: Column, donut/pie

I've attached GIFs of column, bar, line & donut examples.

To Reproduce

1. https://stackblitz.com/edit/ids-quick-start-1730-i49lns?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts
2. Resize the window so that the double width widget is forced down to single width
3. See the incorrect column chart size/render
4. Resize the window back so that widget can be double width again
5. See the incorrect column chart size/render
6. Repeat above for the different chart types in app.html one by one

For the charts that are incorrect, it seems that they size themselves based on the previous parent width. I.e., when widget shrinks to single column, charts size based on double column. When widget sizes back to double column, the charts size themselves based on a single widget width.

Expected behavior
All charts reacting correctly to parent container width change, in this case widgets on a homepage.

Version

• ids-enterprise: 4.92.0

GIFs
Column:

Donut:

Line (works OK):

Bar (works OK):

Platform

• Infor Application/Team Name: OS Portal / Application teams using chart widgets

Additional context
Would be great to extend this sample to cover more types of charts in double+ width widgets
https://main-enterprise.demo.design.infor.com/components/homepage/test-linechart-x-axis.html

[spendker]

Hi @ericangeles, Could you please provide any environment to test it. because we are also facing the same issue in widget

[ericangeles]

@spendker, you can test it in here https://8410-charts-resize-issues-enterprise.demo.design.infor.com/components/homepage/test-all-charts.html

[tmcconechy]

@spendker will also release a beta today check https://www.npmjs.com/package/ids-enterprise for latest beta.

[spendker]

Hi @ericangeles,@tmcconechy thanks for your quick response a request from my side is in widget we are facing the resize issue when the donut chart legends are in bottom position. So can you please check from your side by putting the legends in the bottom or please let me know how can I check from my side in the given URL

Thanks in advance

[tmcconechy]

@spendker if you pull main and then do npm run build:release then copy and replace you node_modules with what was built in dist.

Not that simple but like npm link aside from that can wait for the 4.94 release.

[spendker]

Hi @tmcconechy, I checked this solution in 4.94 but the issue is not resolved yet. I am putting the gif file.
For bottom legends it is not fixed, but for right it got fixed

[tmcconechy]

@spendker what does "for the right" mean? Noting that we also have this issue reported: #8755

Should we reopen and recheck or look against that issue? cc @tjamesallen15 any thoughts?

[spendker]

@tmcconechy right means it indicates the legendplacement.

[tmcconechy]

@tjamesallen15 can you recheck?

[ericangeles]

@tmcconechy, I think the challenge here on our end is that we can't reproduce it on our examples. If this is critical for you, @spendker, find some time to connect with @tjamesallen15. Also, if you have an environment that we can check, that would be helpful.

[tmcconechy]

Maybe #8755 is more clear? If we can fix that it seems the same?

[tjamesallen15]

Maybe #8755 is more clear? If we can fix that it seems the same?

I think it's more related on this one.