Repository navigation
[docs][charts] Add synchronized tooltip and crosshair demo - #23368
Merged
JCQuintas merged 10 commits intoAug 27, 2026
Merged
Conversation
Demonstrates sharing `highlightedAxis` between stacked line charts and rendering a single tooltip that reads every chart at the shared dataIndex.
JCQuintas
added
type: enhancement
Deploy previewBundle size
Check out the code infra dashboard for more information about this PR. |
alexfauquette
approved these changes
Aug 26, 2026
Member
|
Look nice. Just need to increase the y-axis space to avoid the elipses 
|
Member
Author
thats actually a different issue 🤔 Seems ellipsis are being added because of the label crosses the top margin, if we increase the top margin on the demo it fixes it 😮 |
The string measurement cache is shared by every chart on the page and was never invalidated, so a size measured with the fallback font, before the web font finished loading, stayed cached for the lifetime of the page. `batchMeasureStrings` also left its styles on the shared measurement container, so a later call omitting one of those properties measured with the previous call's value. And the cache was wiped entirely once it passed 2000 entries, which made a measurement depend on how many strings were measured before it. Reset the container style between calls, evict the oldest entries instead of wiping the whole cache, and clear the cache when fonts finish loading.
This reverts commit 4658c76.
`getStringSize` caches sizes in a module level map and every regression test shares a single page, so a demo could reuse a size measured by an earlier one, including sizes measured before the fonts finished loading. Axis label truncation then depended on the order the tests ran in and on how many strings were measured before, which showed up as screenshot diffs in unrelated demos. Export `clearStringMeasurementCache` from the charts internals and call it in `TestViewer` whenever the route changes. It runs during render because the children measure their text before any effect fires.
…tests" This reverts commit 8ed1897.
JCQuintas
enabled auto-merge (squash)
August 27, 2026 10:20
JCQuintas
disabled auto-merge
August 27, 2026 10:21
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
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.
Adds a docs demo showing how to synchronize the tooltip and crosshair across several charts that share an x axis.
Closes #17555.
Approach
The demo uses only public API:
AxisItemIdentifier[]state passed to every chart ashighlightedAxisand updated by every chart'sonHighlightedAxisChange, so hovering any chart highlights the same index on all of them.axisHighlight={{ x: 'line' }}then draws the crosshair everywhere.slotProps={{ tooltip: { trigger: 'none' } }}.Popperand a virtual anchor that follows the pointer, readingdata[dataIndex]for each chart. This follows the same pattern as the existingItemTooltipFixedYdemo.useAxesTooltipanduseItemTooltipare not usable here: they read the interaction state of the chart they are mounted in, so they only ever return that chart's series.Notes for follow up
Two rough edges surfaced while building this. Neither blocks the demo, but both are worth tracking separately:
ChartsTooltipContainerbindspointermoveto its own layer container, so the virtual anchor has to be reimplemented in userland.yAxis.widthso the crosshairs line up. Withwidth: 'auto'the axis widths differ per chart and the crosshairs drift apart.The demo is pointer driven. Keyboard navigation still moves
highlightedAxis, but the tooltip anchor stays at the last pointer position.