No HTML or foreignObject scene node: per-datum icons and badges cannot live inside the plot
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 35/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- react, typescript
- Domain
- data-visualization, frontend
Research direction
Start with the SceneNode definitions in packages/charts-core/src/types.ts and the renderSvg implementation mentioned in the issue. Trace how scene nodes are rendered and how layout, clipping, and enter/exit motion are handled. Done means choosing and documenting a supported way to render per-datum HTML or foreignObject content with the described layout and motion behavior.
Written by the indexing model from the issue text.
Description
A chart that needs a per-datum icon, badge or other HTML inside the plot has no scene node for it.
SceneNodeisgroup | rule | polyline | area | dot | rect | label(types.ts:1599-1606). None embeds HTML or foreign content, andforeignObjectis not emitted anywhere incharts-core.SceneLabelcarries a plaintext: string(types.ts:1582-1586).- The only HTML slots are the tooltip body and the tooltip
portalextension (types.ts:1666). Neither follows the scene's layout, clipping or enter/exit motion.
Use case: marker discs on a time-series chart, each holding a caller-supplied icon (an SVG or React element), sized to fill the disc or inset from it. Today the icon can only be drawn as label text, so element icons cannot be shown.
Repro
Nothing to run; this is an absence. A mark that emits a SceneNode with kind: 'html' (or any non-listed kind) is not part of the type, and renderSvg has no branch for it.
Proposal
Either:
- A scene node that hosts HTML or
foreignObjectcontent (position, size, a child), rendered by the SVG renderer and skipped or rasterised by canvas; or - a documented custom-renderer slot for per-datum HTML that receives the resolved layout and takes part in enter and exit motion.
Checked against 57774e14a1a86081eddb3a23523724a40da05640 (v1.1.0).
- Dominant language
- TypeScript
- Stars
- 819
- Forks
- 49
- Avg merge
- 12h 9m
- Merged PRs (30d)
- 6
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
-
Renderer treats a sub-pixel width difference as a resize, which cancels the `motion()` entranceOpen
Difficulty 1/5 Under an hour Newbie friendliness 85/100
TanStack/charts#182 · 1 comment ·
Maintainers usually reply within 1 day
-
brushX with `values` can shorten the selection range when it’s dragged to the plot edgePossibly taken @andersk claimed this 5 days ago. Open
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Maintainers usually reply within 1 day
-
Difficulty 4/5 3-5 days Newbie friendliness 48/100
Maintainers usually reply within 1 day
-
Grid and axis lines have no `shape-rendering` option, so hairlines anti-alias across two device rowsOpen
Difficulty 3/5 1-2 days Newbie friendliness 76/100
Maintainers usually reply within 1 day
-
Difficulty 4/5 3-5 days Newbie friendliness 35/100
Maintainers usually reply within 1 day
Similar issues
-
status: needs-triage
Difficulty 2/5 1-3 hours Newbie friendliness 83/100
a2ui-project/a2ui#3158 ·
Maintainers usually reply within 2 days
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
hemilabs/ui-monorepo#2475 ·
Maintainers usually reply within 1 day
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 82/100
lingdojo/kana-dojo#32279 · 1 comment · 5 reactions ·
Maintainers usually reply within 1 day
-
code-quality refactoring
Difficulty 2/5 1-3 hours Newbie friendliness 77/100
github/gh-aw-firewall#9879 ·
Maintainers usually reply within 1 day
-
[Bug]: Arrow-key cursor movement in combined diff view doesn't scroll to keep the cursor visibleOpenos:macos
Difficulty 2/5 1-3 hours Newbie friendliness 64/100
Maintainers usually reply within 1 day