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.
Version:
@tanstack/charts0.16.0.ChartSpec.gradientslets a definition declare linear gradients that the renderer emits into<defs>and marks reference asurl(#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 inAPI-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/serializeChartSvgand ties the fill to the DOM host. Concrete uses we are migrating: a funnel stagerenderPattern(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
patternsresource next togradients(id,width/height,patternUnits, and either a small set of presets such aslines/circleswithstroke/fill/strokeWidth/angle, or a list of primitive shapes), emitted by the SVG renderer and the export path alike, so marks can usefill: 'url(#id)'natively? An optionalsvgAnimation-awareoffseton the pattern would also cover animated sweeps on loading placeholders.