TanStack / TanStack/charts

Support `states` on polar marks (`radialArc`, `radialArea`, `radialDot`) and `geoShape`

Open
#126 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.

Cartesian marks accept states (when: { focus } + style + transition) so a focused or unmatched datum can change fillOpacity, stroke, r, etc. natively. The polar marks and geoShape do not declare states in their option types (RadialArcOptions, RadialAreaOptions, RadialDotOptions, PolarOptions, GeoShapeOptions), although the scene layer already resolves states for any initialized mark that carries the field: a wrapper that sets states: { data, definitions } on initialize works in 0.15.0 and 0.16.0.

Without it, legend hover dim and focus lift on pie, donut, gauge, radar and choropleth have to be baked into the colour channel (color-mix alpha per datum), which loses the transition and cannot dim url(#…) pattern paints at all.

Would it be possible to expose states on RadialArcOptions, RadialAreaOptions, RadialDotOptions, PolarOptions and GeoShapeOptions, using the same ChartMarkState type the Cartesian marks take? Hover dim from a legend or focus is a standard affordance in Recharts, ECharts and Nivo for pie, radar and map series.

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 by locating the declarations for RadialArcOptions, RadialAreaOptions, RadialDotOptions, PolarOptions, GeoShapeOptions, and the Cartesian marks that already use ChartMarkState. Compare their state option types and confirm that all five polar or geographic options accept the same states field; verify the existing scene-layer state resolution still supports hover, focus, transitions, and pattern paints.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.