Declare `<pattern>` resources on a chart (hatch, dot and animated pattern fills)
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 38/100
- Issue type
- Feature
- Clarity
- Needs clarification
- Activity status
- Active
- Tech stack
- typescript
- Domain
- data-visualization
Research direction
No implementation files or tests are named. Start by reading F-259 in API-FRICTION.md and tracing the existing gradients handling through the SVG renderer and export path. Done should include a defined patterns resource API that emits pattern definitions and preserves them through chart image rendering and SVG serialization.
Written by the indexing model from the issue text.
Description
Version: @tanstack/charts 0.16.0.
ChartSpec.gradients lets a definition declare linear gradients that the renderer emits into <defs> and marks reference as url(#id) paint, and the export path serialises them. There is no equivalent for <pattern>: a definition cannot declare a hatch, dot or stripe fill, and F-259 in API-FRICTION.md ("Chart resources cannot declare patterns") notes that injecting an application-owned pattern into the chart svg is not an intended workaround.
Without it, pattern fills (a common request for accessibility-friendly and print-friendly series encoding in Recharts, ECharts, Highcharts and Vega) have to be rendered by the host outside the chart svg and referenced by id, which breaks renderChartImage/serializeChartSvg and ties the fill to the DOM host. Concrete uses we are migrating: a funnel stage renderPattern(id, color) prop, sankey link patterns, hatched area fills on candlestick and gauge, heatmap cell hatch, and a loading placeholder whose sweep is an animated <pattern>.
Would it be possible to add a patterns resource next to gradients (id, width/height, patternUnits, and either a small set of presets such as lines/circles with stroke/fill/strokeWidth/angle, or a list of primitive shapes), emitted by the SVG renderer and the export path alike, so marks can use fill: 'url(#id)' natively? An optional svgAnimation-aware offset on the pattern would also cover animated sweeps on loading placeholders.
- Dominant language
- TypeScript
- Stars
- 749
- Forks
- 45
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 26
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.
More from TanStack/charts
-
A datum that renders as several leaves cannot be stated once: `states` on a group is never resolved Open
Difficulty 4/5 3-5 days Newbie friendliness 48/100
-
Difficulty 5/5 Over a week Newbie friendliness 45/100
-
Difficulty 4/5 3-5 days Newbie friendliness 55/100
-
Difficulty 4/5 3-5 days Newbie friendliness 52/100
-
Difficulty 3/5 1-2 days Newbie friendliness 72/100
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Eynzof/Hermes-CN-Desktop#610 ·
-
bug clawsweeper:linked-pr-open clawsweeper:needs-live-repro clawsweeper:no-new-fix-pr impact:message-loss issue-rating: 🐚 platinum hermit P2 regression
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 78/100
fullcalendar/fullcalendar#8106 ·