[Support]: External Resource Link Elements Cause Tooltip & ARIA Label Display Issues #4279
Description
Link to reproducible scenario
https://plnkr.co/edit/v5lscWuJUOxM69xo?open=index.jsx
Add a description
Experiencing an issue with displaying the chart legend on a stacked bar chart. The chart legend's ARIA labels display in the top left corner of the page like so:
It looks like this is happening because the chart's container element is overflowing beyond its parent container:
This issue occurs intermittently, but reliably when doing a page load on the page that the chart appears in.
Oddly, I am able to resolve the issue by removing <link> external resource elements from the <head> of our application's html. This is the only fix that has worked reliably - the presence of a single <link> element with any rel property will cause the container to be mis-sized, while removing all <link> elements leads to the container sizing appropriately.
We experience a similar issue when using an Area chart that contains tooltips. The chart's container overflows beyond its parent container, and the tooltips appear below the chart on the page.
Reproducible across browsers (Chrome, safari, etc.)
AG Charts v11.2.4
node version: lts/iron (20.x)
React version: 18.2.0
Nextjs application
Unfortunately, I cannot reproduce it in a plunker, but the code is quite similar to what is in the linked plunker.
Has this issue been reported before? Any insight into what may be going wrong here or if you've provided a workaround in the past?
Thank you!!
Version
11.2.4
What language are you using?
React
What browser are you using?
Chrome