Declare `<pattern>` resources on a chart (hatch, dot and animated pattern fills)
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.
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.
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
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.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Needs clarification
- Newbie friendliness
- 38/100