[Support]: Many charts Render then the Tooltip Is not Proper visible #5959
Description
Link to reproducible scenario
No response
Add a description
Hello AG Charts Support Team,
We are currently developing an Angular application using ag-charts-community and ag-charts-angular (Version ^12.3.0) and are encountering a persistent issue with tooltip visibility in a complex dashboard layout.
Environment Details:
Framework: Angular 14+
Library:
OS/Browser: Windows / Chrome, Edge
Issue Description: Our dashboard consists of multiple stacked, collapsible sections (using Bootstrap-style Cards/Accordions). Each section contains multiple chart instances. We are observing the following behavior:
Tooltip Clipping: By default, tooltips render within the chart's DOM hierarchy. Because our collapsible containers typically utilize overflow: hidden for animations, tooltips near the edges of charts are frequently clipped or completely hidden.
Stacking Context Conflicts: When multiple sections are expanded, charts in lower sections often fail to display tooltips correctly, or they are obscured by the container boundaries of the section above them.
container: document.body Instability: We attempted to resolve this by configuring the chart options with tooltip: { container: document.body }. While this moves the DOM element to the root (solving the clipping), it introduces new alignment issues where the tooltip does not correctly track the chart's position during page scrolling or layout resizing (e.g., when a section @collapses/expands).
Version
ag-charts-community / ag-charts-angular v12.3.0
What language are you using?
Angular
What browser are you using?
Chrome