Focus is unreachable from tick labels, and point-less marks cannot match `states`
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
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
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