TanStack / TanStack/charts

Crosshair label: a background box (padding, radius, fill) behind the axis label

Open
#132 0 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.