Skip to content

Adding any focus mark removes the built-in focused-point ring from the whole chart #33

Description

@dschoent

Version: @tanstack/charts 0.4.0

Repro

  1. A chart with lineY + the tooltip extension: hovering shows the default focus ring (the --ts-chart-focus-fill circle) on the nearest point. ✅
  2. Add any whenFocused(...) mark to the same definition — e.g. a focused band straight from the docs example:
marks: [
  whenFocused(bandX(dates, { x: "date", fillOpacity: 0.14 }), { match: "x" }),
  lineY(rows, { x: "date", y: "value", color: "series" }),
],
  1. The focused-point ring is now gone everywhere — hover and keyboard navigation no longer highlight which point the tooltip refers to.

Why

In scene.js, the default focus layer is only built when no focus marks exist:

const hasFocusMarks = initialized.some((mark) => mark.focus)
// ...
if (!hasFocusMarks && points.length) { /* build default-focus layer */ }

So opting into one decorative focus mark silently opts the chart out of the built-in point highlight.

Expected

The default ring persists alongside author-supplied focus marks (they serve different purposes: decoration at the focused x vs. identifying the focused point), or an explicit definition-level option to disable it — but not an implicit all-or-nothing.

Context

Hit while adding a crosshair focus mark: dense multi-series charts lost the "which point is the tooltip about?" affordance. Worked around by recreating the ring as whenFocused(dot(rows, {..., r: 5}), { match: "primary" }) per mark group.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions