[Feature] Resources: `<mask>` and non-rectangular (path) clips
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 42/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- typescript
- Domain
- data-visualization, frontend
Research direction
Start with packages/charts-core/src/types.ts for SceneGroup.clip, then trace how clipping is rendered in svg-renderer.ts and canvas.ts and applied in nearest.ts hit testing. The request also needs a mask resource alongside gradients or patterns, but does not specify its shape or rendering API. Done means path clips work in SVG, canvas, and hit testing, and masks can be declared and referenced as resources.
Written by the indexing model from the issue text.
Description
Version: @tanstack/charts 1.1.0 (57774e1). Split from the comments on #128 and #191 so the ask stays open when those issues close.
Two resource types have no scene representation: a <mask> (first reported on 0.16.0, still absent in 1.1.0) and a clip that is not a rectangle.
Mask (from #128's comment)
An SVG <mask> with maskUnits="userSpaceOnUse" used as an edge fade on a live (rolling) line chart. It fades the line, its fill and the tip marker together, so a stroke gradient with opacity stops in gradients cannot replace it. We render it beside the chart svg and reference it by id, the same seam as patterns. packages/charts-core/src has no mask handling.
Path clip (from #191's comment)
SceneGroup.clipisChartBounds(x,y,width,height) (types.ts:1500).- The SVG renderer always writes
<clipPath><rect/></clipPath>(svg-renderer.ts:169-176), canvas usescontext.rect(...)thenclip()(canvas.ts:1243-1251), and hit testing intersects bounds (nearest.ts:198-203). - The only path
<clipPath>is private to the arc enter sweep (motion.ts:1653-1663). No scene node carries a path clip or mask.
Example: a highlight pulse that must be clipped to a non-rectangular silhouette (an isometric bar's front face, side face and lid). A rectangular clip lights the neighbouring faces.
Ask
Allow clip to be a rect or a path ({ path: string, fillRule?: 'nonzero' | 'evenodd' }), rendered as the <clipPath> child in SVG and a Path2D clip on canvas, with the path's bounds used for hit testing. For masks, a declared masks resource next to gradients (scoped by idPrefix), or the same generic resource slot that PR #166 adds for <pattern>.
Read from source, not run.
Related: #128 / PR #166 (<pattern> resources), #191 (gradients).
- Dominant language
- TypeScript
- Stars
- 819
- Forks
- 49
- Avg merge
- 4h 58m
- Merged PRs (30d)
- 15
Getting set up
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing 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.
More from TanStack/charts
-
[Bug] Focus guides: `url(#id)` paints ignore `idPrefix`Possibly taken @getdownandcode claimed this today. Open
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
TanStack/charts#211 · 1 comment ·
Maintainers usually reply within 1 day
-
[Bug] Printed charts keep their screen width: resize redraw waits for an animation framePossibly taken @piecyk claimed this today. Open
Difficulty 3/5 1-2 days Newbie friendliness 25/100
Maintainers usually reply within 1 day
-
Difficulty 5/5 Over a week Newbie friendliness 25/100
TanStack/charts#227 · 2 comments ·
Maintainers usually reply within 1 day
-
Difficulty 4/5 3-5 days Newbie friendliness 57/100
Maintainers usually reply within 1 day
-
Difficulty 5/5 Over a week Newbie friendliness 35/100
Maintainers usually reply within 1 day
Similar issues
-
Create/import wallet form shows raw "password must be at least 1 characters" instead of the translated messagePossibly taken @CapThunder19 claimed this today. Openbug
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
joinmarket-webui/jam#1538 ·
Maintainers usually reply within 1 day
-
t0ggles
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
nolimits4web/swiper#8240 · 1 comment ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
modelcontextprotocol/inspector#2723 ·
Maintainers usually reply within 1 day
-
status:approved type:bug
Difficulty 1/5 Under an hour Newbie friendliness 70/100
egdev6/quorb#109 · 1 comment ·
Maintainers usually reply within 1 day