Incorrect msarea graph rendering inside hidden container v3.18.0

[raman-nareika]

Hi. I have 2 tabs with graphs:

• doughnut2d (Investments tab)
• msarea (Line Graph tab)

Tabs visibility toggles via display: hidden;

When I call update from the Line Graph tab both graphs are updated correctly.

But if I call update from the Investments tab (the Line Graph tab is hidden) msarea chart is incorrect:

Backend responses are equal:

• from Investments tab {"Categories":"[{\"label\":\"Jan 18\"},{\"label\":\"Jan 23\"},{\"label\":\"Jan 30\"},{\"label\":\"Feb 06\"},{\"label\":\"Feb 13\"},{\"label\":\"Feb 20\"},{\"label\":\"Feb 27\"},{\"label\":\"Mar 06\"},{\"label\":\"Mar 13\"},{\"label\":\"Mar 20\"},{\"label\":\"Mar 27\"},{\"label\":\"Apr 03\"},{\"label\":\"Apr 10\"},{\"label\":\"Apr 17\"},{\"label\":\"Apr 18\"}]","DataSet":"[{\"seriesname\":\"investments\",\"data\":[{\"value\":\"0\",\"toolText\":\"Jan 18, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Jan 23, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Jan 30, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Feb 06, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Feb 13, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Feb 20, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Feb 27, د.إ0.00\"},{\"value\":\"350\",\"toolText\":\"Mar 06, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Mar 13, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Mar 20, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Mar 27, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Apr 03, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Apr 10, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Apr 17, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Apr 18, د.إ350.00\"}],\"anchorRadius\":0}]","Annotations":null,"YAxisMaxValue":385.0,"YAxisMinValue":0.0,"Caption":"investments","RenderAt":"investments-chart","Action":"investments/investments","Data":{"totalAmount":"د.إ350"},"PrimaryLightColour":"58a9c6","PrimaryDarkColour":"2e545e","BaseFontColour":"555555","CentreLabel":null,"MinusColour":null,"PlusColour":null,"LabelDisplay":"","LabelStep":0,"ShowNavigation":true,"NumVDivLines":5,"FooterNote":null,"ShowFooterNote":false,"IsAllocationPieChart":false,"IsProtectionGraphChart":false,"HasData":true,"LabelStepType":1,"CurrencySymbol":"د.إ","FiltersOptions":null}
• from the Line Graph tab {"Categories":"[{\"label\":\"Jan 18\"},{\"label\":\"Jan 23\"},{\"label\":\"Jan 30\"},{\"label\":\"Feb 06\"},{\"label\":\"Feb 13\"},{\"label\":\"Feb 20\"},{\"label\":\"Feb 27\"},{\"label\":\"Mar 06\"},{\"label\":\"Mar 13\"},{\"label\":\"Mar 20\"},{\"label\":\"Mar 27\"},{\"label\":\"Apr 03\"},{\"label\":\"Apr 10\"},{\"label\":\"Apr 17\"},{\"label\":\"Apr 18\"}]","DataSet":"[{\"seriesname\":\"investments\",\"data\":[{\"value\":\"0\",\"toolText\":\"Jan 18, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Jan 23, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Jan 30, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Feb 06, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Feb 13, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Feb 20, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Feb 27, د.إ0.00\"},{\"value\":\"350\",\"toolText\":\"Mar 06, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Mar 13, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Mar 20, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Mar 27, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Apr 03, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Apr 10, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Apr 17, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Apr 18, د.إ350.00\"}],\"anchorRadius\":0}]","Annotations":null,"YAxisMaxValue":385.0,"YAxisMinValue":0.0,"Caption":"investments","RenderAt":"investments-chart","Action":"investments/investments","Data":{"totalAmount":"د.إ350"},"PrimaryLightColour":"58a9c6","PrimaryDarkColour":"2e545e","BaseFontColour":"555555","CentreLabel":null,"MinusColour":null,"PlusColour":null,"LabelDisplay":"","LabelStep":0,"ShowNavigation":true,"NumVDivLines":5,"FooterNote":null,"ShowFooterNote":false,"IsAllocationPieChart":false,"IsProtectionGraphChart":false,"HasData":true,"LabelStepType":1,"CurrencySymbol":"د.إ","FiltersOptions":null}

So, the incorrect rendering of msarea chart occurs only if a container is hidden. The issue was reproduced for v3.16.0 and v3.18.0