TanStack / TanStack/charts

Focus is unreachable from tick labels, and point-less marks cannot match `states`

Open
#134 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. Two related gaps; both end up forcing a rebuild of the whole chart definition on pointer move.

(a) tickLabels.opacity cannot see focus.

ChartAxisTickLabelContext carries geometry only:

// dist/types.d.ts
export interface ChartAxisTickLabelContext<TValue extends ChartValue = ChartValue> {
    value: TValue;
    index: number;
    position: number;
    bandwidth: number;
}

and ChartAxisTickLabelValue resolves over exactly that context. A common effect — fade the axis tick labels the crosshair pill is currently covering — is therefore not expressible from package state. The workaround is to thread the pointer position into the definition and recompute opacity from it, which means opacity becomes a fresh closure on every pointer move, the ChartDefinition is a new object each time, and the definition memo misses. Five chart families in our port do this today (line, area, candlestick, scatter, bar) purely because the effect has nowhere else to live.

Would it be possible for the tick-label context to carry the current focus (or for focus to sit alongside opacity in ChartAxisTickLabelOptions), so the fade resolves as a pure function of package state?

(b) Point-less marks cannot participate in states.

applyStateStyle switches on the output kind and handles dot, rect and label:

// dist/mark-state.js
switch (output.kind) {
  case "dot": ...
  case "rect": ...
  case "label": ...
}

and state matching resolves through point lookup. An area fill emits no ChartPoints, so it can never match a state — which means "dim every other series' fill while one series is focused", the standard multi-series area hover, cannot be written in the spec at all. We dropped that behaviour from our composed chart rather than reach into the DOM for it.

Would it be possible to make point-less marks matchable by series key, so a fill can take part in states without emitting points it does not have?

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

Start with dist/types.d.ts and the ChartAxisTickLabelContext and ChartAxisTickLabelOptions definitions, then inspect dist/mark-state.js and applyStateStyle's handling of output kinds and point lookup. Done means focus can drive tick-label opacity from package state and point-less area fills can match states by series key without requiring chart-definition rebuilds.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.