TanStack / TanStack/charts

Declare `<pattern>` resources on a chart (hatch, dot and animated pattern fills)

Open
#128 1 comment 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.

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

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.