Skip to content

Add renderer-neutral radial gradients - #147

Merged
tannerlinsley merged 36 commits into
mainfrom
taren/add-radial-gradients
Sep 10, 2026
Merged

tannerlinsley merged 36 commits into
mainfrom
taren/add-radial-gradients

Conversation

@tannerlinsley

@tannerlinsley tannerlinsley commented Sep 9, 2026 •

Copy link
Copy Markdown
Member

Summary

  • Add ChartRadialGradient to the renderer-neutral chart and scene resource contract.
  • Render scoped radial resources in SVG and React Native.
  • Paint exact objectBoundingBox radial fills in Canvas, including elliptical results on non-square bounds.
  • Normalize linear coordinates and authored gradient stop order consistently across renderers.
  • Replace keyed gradient resources synchronously during linear-to-radial changes so duplicate IDs never exist.

Canvas boundary

Canvas radial gradients support fills. Radial strokes throw a clear error because a nonuniform objectBoundingBox transform would distort stroke width. SVG and React Native support radial fills and strokes.

Validation

  • Cache-free pnpm validate on Node 24.18.0.
  • Focused renderer suite: 8 files, 196 tests.
  • Chromium Canvas versus rasterized SVG parity, including non-square bounds and decreasing stops.
  • Package, declaration, bare and Expo Metro, docs, catalog, bundle, and comparison gates pass.

Release

  • Minor changesets for @tanstack/charts and @tanstack/react-native-charts. The fixed package group propagates the release to the framework adapters.

Closes #129

Summary by CodeRabbit

  • New Features

    • Added radial gradient support across SVG, Canvas, and React Native renderers.
    • Added shared gradient types and exports for linear and radial resources.
    • Added normalized coordinate handling, stop clamping, and radial-gradient animation support.
    • Canvas supports radial fills; radial strokes remain unsupported.
  • Documentation

    • Updated gradient references, rendering guidance, examples, and bundle-size measurements.

sukvvon and others added 25 commits August 8, 2026 13:09
A y scale with `side: 'right'` took its tick-label anchor from the physical
side alone. That anchor reaches the DOM as SVG `text-anchor`, which resolves
against inline base direction, so an RTL container painted the labels leftward
into the plot. The margin pass then read those bounds correctly and reserved
nothing on the right, widening the plot until it ran under its own labels.

Anchor the far side with `end` once the container reads right to left, and
mirror the same relation in the text estimator so a host without a DOM
measurer resolves the identical layout.
The layout fix costs 73 B raw in shared code, which puts the difference-mark
increment 0.02 kB over its ceiling. Gzip falls on most entries.
# Conflicts:
#	benchmarks/conformance/cases/103-bubble-map/tanstack.ts
#	benchmarks/conformance/cases/34-pointer-tooltip/tanstack.ts
#	benchmarks/conformance/cases/83-focus-context-window/view.tsx
#	benchmarks/conformance/cases/86-streaming-window-preservation/view.tsx
#	benchmarks/conformance/cases/88-echarts-free-cursor/controls.ts
#	benchmarks/conformance/cases/91-timeline-playback-scrubber/tanstack.ts
#	benchmarks/conformance/cases/92-editable-event-range/tanstack.ts
@coderabbitai

coderabbitai Bot commented Sep 9, 2026 •

Copy link
Copy Markdown

Review Change StackReview Change Stack

Warning

Review limit reached

Next included review available in 30 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used all 4 included reviews currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: ef84d747-1da3-4794-bbde-42c5f8a96178

📥 Commits

Reviewing files that changed from the base of the PR and between f175e63 and 4bd8021.

📒 Files selected for processing (31)
  • API-FRICTION.md
  • benchmarks/bundle-size/README.md
  • benchmarks/bundle-size/universal-baseline.json
  • benchmarks/comparison/bundle-baseline.json
  • benchmarks/conformance/previews/manifest.json
  • docs/comparison.md
  • docs/guides/bundle-size-and-performance.md
  • docs/guides/themes-and-styling.md
  • docs/reference/chart-spec.md
  • docs/reference/runtime-and-scene.md
  • docs/reference/scales-guides-and-color.md
  • docs/reference/types.md
  • packages/charts-core/docs/comparison.md
  • packages/charts-core/docs/guides/bundle-size-and-performance.md
  • packages/charts-core/docs/guides/themes-and-styling.md
  • packages/charts-core/docs/reference/chart-spec.md
  • packages/charts-core/docs/reference/runtime-and-scene.md
  • packages/charts-core/docs/reference/scales-guides-and-color.md
  • packages/charts-core/docs/reference/types.md
  • packages/charts-core/src/canvas.test.ts
  • packages/charts-core/src/canvas.ts
  • packages/charts-core/src/export.test.ts
  • packages/charts-core/src/index.ts
  • packages/charts-core/src/motion.test.ts
  • packages/charts-core/src/svg-renderer.test.ts
  • packages/charts-core/src/types.ts
  • packages/charts-core/src/universal-types.ts
  • packages/react-native-charts/src/Chart.test.tsx
  • packages/react-native-charts/src/SvgScene.test.tsx
  • packages/react-native-charts/src/SvgScene.tsx
  • scripts/measure-bundles.mjs

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: 29528c12-c02d-45e7-92a2-2aa723599cee

📥 Commits

Reviewing files that changed from the base of the PR and between 32e3c73 and f175e63.

📒 Files selected for processing (41)
  • .changeset/add-radial-gradients.md
  • API-FRICTION.md
  • benchmarks/bundle-size/README.md
  • benchmarks/bundle-size/universal-baseline.json
  • benchmarks/comparison/bundle-baseline.json
  • benchmarks/conformance/previews/manifest.json
  • docs/comparison.md
  • docs/examples/themes-and-motion.md
  • docs/guides/bundle-size-and-performance.md
  • docs/guides/themes-and-styling.md
  • docs/reference/chart-spec.md
  • docs/reference/rendering-and-export.md
  • docs/reference/runtime-and-scene.md
  • docs/reference/scales-guides-and-color.md
  • docs/reference/types.md
  • packages/charts-core/docs/comparison.md
  • packages/charts-core/docs/examples/themes-and-motion.md
  • packages/charts-core/docs/guides/bundle-size-and-performance.md
  • packages/charts-core/docs/guides/themes-and-styling.md
  • packages/charts-core/docs/reference/chart-spec.md
  • packages/charts-core/docs/reference/rendering-and-export.md
  • packages/charts-core/docs/reference/runtime-and-scene.md
  • packages/charts-core/docs/reference/scales-guides-and-color.md
  • packages/charts-core/docs/reference/types.md
  • packages/charts-core/src/canvas.test.ts
  • packages/charts-core/src/canvas.ts
  • packages/charts-core/src/export.test.ts
  • packages/charts-core/src/exports.test.ts
  • packages/charts-core/src/index.ts
  • packages/charts-core/src/motion.test.ts
  • packages/charts-core/src/reconcile.test.ts
  • packages/charts-core/src/reconcile.ts
  • packages/charts-core/src/svg-renderer.test.ts
  • packages/charts-core/src/svg.ts
  • packages/charts-core/src/types.ts
  • packages/charts-core/src/universal-types.ts
  • packages/react-native-charts/src/Chart.test.tsx
  • packages/react-native-charts/src/SvgScene.test.tsx
  • packages/react-native-charts/src/SvgScene.tsx
  • scripts/check-canvas-renderer.mjs
  • scripts/measure-bundles.mjs

Included review availability: Your plan provides up to 4 included reviews per hour; 2 remain after this review.


📝 Walkthrough

Walkthrough

The PR adds renderer-neutral linear and radial gradient types. SVG, Canvas, and React Native now support radial gradient resources with normalized coordinates, stop normalization, renderer-specific fill and stroke behavior, reconciliation updates, tests, documentation, and refreshed bundle measurements.

Changes

Gradient support

Layer / File(s) Summary
Gradient contract and public exports
packages/charts-core/src/types.ts, packages/charts-core/src/universal-types.ts, packages/charts-core/src/index.ts, packages/charts-core/src/exports.test.ts, docs/reference/*, packages/charts-core/docs/reference/*, API-FRICTION.md, .changeset/add-radial-gradients.md
Adds ChartGradientBase, ChartRadialGradient, and the ChartGradient union. Widens chart spec and scene gradient collections. Exports and documents the new types.
SVG and React Native gradient rendering
packages/charts-core/src/svg.ts, packages/charts-core/src/reconcile.ts, packages/react-native-charts/src/SvgScene.tsx, packages/charts-core/src/*test.ts, packages/react-native-charts/src/*test.tsx, docs/reference/rendering-and-export.md, packages/charts-core/docs/reference/rendering-and-export.md
Emits radial gradients with default geometry, clamps values and stops, preserves authored stop order, and supports gradient replacement and focal-point animation.
Canvas radial fill and stroke handling
packages/charts-core/src/canvas.ts, packages/charts-core/src/canvas.test.ts, docs/guides/themes-and-styling.md, packages/charts-core/docs/guides/themes-and-styling.md
Paints radial fills in normalized object-bounding-box space, clips them to targets, handles degenerate cases, and rejects radial strokes or fills without measurable bounds.
Cross-renderer validation and release measurements
scripts/check-canvas-renderer.mjs, benchmarks/*, docs/comparison.md, packages/charts-core/docs/comparison.md, docs/guides/bundle-size-and-performance.md, packages/charts-core/docs/guides/bundle-size-and-performance.md, scripts/measure-bundles.mjs
Adds Canvas and SVG parity checks and updates bundle budgets, baselines, comparison data, conformance metadata, and measured documentation values.

Priority: ➖ Normal

Estimated code review effort: 4 (Complex) | ~45 minutes

Severity of issue fixed: Medium

Sequence Diagram(s)

sequenceDiagram
  participant ChartSpec
  participant SVGRenderer
  participant CanvasRenderer
  participant ReactNativeAdapter
  ChartSpec->>SVGRenderer: provide linear or radial gradient
  ChartSpec->>CanvasRenderer: provide linear or radial gradient
  ChartSpec->>ReactNativeAdapter: provide linear or radial gradient
  SVGRenderer->>SVGRenderer: emit SVG gradient resources
  CanvasRenderer->>CanvasRenderer: clip and paint radial fills
  ReactNativeAdapter->>ReactNativeAdapter: emit react-native-svg resources
Loading

Merge Risk: ⚪ Minimal · up to f175e

No actionable merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 26 functions across 17 files. (24 skipped:… Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely describes the primary change: adding renderer-neutral radial gradients.
Linked Issues check ✅ Passed The pull request satisfies issue #129. It adds radial gradient entries with radial geometry and stops, emits them through the shared SVG and export resource path, and adds Canvas and React Native supp…
Out of Scope Changes check ✅ Passed The changes are related to radial gradient support. Tests, documentation, type exports, conformance checks, bundle baselines, and changesets support or validate the requested renderer and export chang…
Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 26 functions across 17 files. (24 skipped: 24 unsupported.)

✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch taren/add-radial-gradients

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@nx-cloud

nx-cloud Bot commented Sep 9, 2026 •

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit 2e038b0

Command Status Duration Result
nx run charts-workspace:ci-distributed ✅ Succeeded <1s View ↗
nx run charts-workspace:package-check ✅ Succeeded <1s View ↗
nx run charts-workspace:benchmark-check ✅ Succeeded <1s View ↗

☁️ Nx Cloud last updated this comment at 2026-09-10 04:57:11 UTC

@tannerlinsley
tannerlinsley merged commit 956d08e into main Sep 10, 2026
18 checks passed
@github-actions github-actions Bot mentioned this pull request Sep 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support radialGradient entries in ChartSpec.gradients

4 participants