fix(ui-v2): fix Recharts tooltip rendering behind other charts #19697
+2
−1
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
After upgrading to Recharts 3, tooltips on pages with multiple charts were showing data from the wrong chart. This was caused by externally controlling the tooltip's 'active' prop while Recharts maintained internal tooltip state, leading to stale payload data being displayed. The fix removes the external control of the 'active' prop and instead lets Recharts handle tooltip visibility naturally. The tooltip content now checks the context to determine if it should render based on which chart is the current holder, ensuring each tooltip displays its own chart's data. Co-Authored-By: [email protected] <[email protected]>
Contributor
Author
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
The tooltip was rendering behind the bars of other charts because each chart row creates its own stacking context. When the tooltip from one chart extends into rows below, it appeared behind those rows' chart bars. The fix adds a high z-index class (z-20) to the ChartContainer when the tooltip is active, ensuring the hovered chart and its tooltip are in a higher stacking layer than surrounding rows. Co-Authored-By: [email protected] <[email protected]>
devin-ai-integration
bot
changed the title
The tooltip was being clipped by the table container's overflow-x-auto which implicitly sets overflow-y to auto as well. This caused tooltips near the bottom of the table to be cut off. The fix adds a containerClassName prop to the Table component that allows overriding the container's className. The DataTable component threads this through as tableContainerClassName. The DeploymentsDataTable uses this to add overflow-y-visible, allowing tooltips to extend beyond the table bounds. Co-Authored-By: [email protected] <[email protected]>
This reverts commit d0f85da.
desertaxle
approved these changes
Dec 9, 2025
desertaxle
deleted the
devin/1765307523-fix-recharts-tooltip-multiple-charts
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
After upgrading to Recharts 3, tooltips on pages with multiple charts (like the deployments page) were rendering behind the bars of other charts when the tooltip extended beyond its own chart row.
Root cause: Each chart row creates its own stacking context. When a tooltip from one chart extends into rows below, it appeared behind those rows' chart bars due to normal stacking order.
Fix: Add a high z-index class (
z-20) to theChartContainerwhen the tooltip is active, ensuring the hovered chart and its tooltip are in a higher stacking layer than surrounding rows. Therelativepositioning is added to ensure the z-index takes effect.Note: There is a separate issue where tooltips can be clipped by table container boundaries (especially near the bottom of the table). This PR does not address that issue - it requires further investigation to identify the exact element causing the clipping.
Human Review Checklist
z-20is sufficient (may need adjustment if other elements have higher z-index)relativepositioning to ChartContainerFlowRunActivityBarChartChecklist
<link to issue>"mint.json.Requested by: @desertaxle ([email protected])
Link to Devin run: https://app.devin.ai/sessions/187bbb9d6eb043c0a4fc9f48dd1fa562