Crosshair label: a background box (padding, radius, fill) behind the axis label
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 749
- Forks
- 45
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 26
Description
Version: @tanstack/charts 0.16.0.
crosshair({ x: { label } }) renders the axis label as two <text> nodes: a stroked halo (stroke, strokeWidth, strokeOpacity, round joins) beneath the filled text. That is right for a label over gridlines, but a common tooltip idiom is a "date pill": the focused x value in a rounded box with its own background, padding: 4px 16px, border-radius: 9999px, and a contrasting text colour (Recharts users hand-roll this, Nivo's crosshair has none, ECharts axisPointer.label ships backgroundColor, padding, borderRadius).
Migrating such a component with the halo alone leaves a glyph-shaped blob: with fontSize: 14, strokeWidth: 20 the halo measures 62×30 px where the box was 77×32 px, and the outline follows the letter shapes instead of a rounded rectangle. strokeWidth trades width against height, so no value reproduces the box, and there is no way to give the label horizontal padding different from vertical.
Would it be possible to add a background (or box) option to the crosshair label — fill, fillOpacity, padding (number or { x, y }), radius, stroke — rendered as a <rect> sized from the measured text and emitted through the same SVG/export path as the halo? The halo could stay as the default when no box is set.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No file or test is named in the issue. Start by locating the crosshair label renderer and the SVG/export path, then check any related tests. Done means the label can render the requested rounded background options while retaining the halo as the default when no box is configured.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100