Add deterministic live chart motion and viewports

[tannerlinsley]

What changed

• Add validated rolling path motion that translates retained geometry instead of interpolating samples, including affine y reprojection, interruption composition, clipped overscan, and explicit snap-or-morph fallback.
• Add continuous axis viewports with a committed semantic domain and transient pixel translation so chart content can page while guides and fixed annotations remain stationary.
• Add a stable interaction controller for long-press and application-owned focus, with pointer opt-out, presentation-aware resolution, pinning, and framework adapter forwarding.
• Keep line points, focus marks, tooltips, inline mark states, and custom spatial indexes synchronized through live motion and viewport changes.
• Make default SVG output honor scene clips and gradients, and add explicit pixel width/height controls for focus bands.
• Add standalone dynamic-y live charts and iOS-style paged-history examples.

Public contracts

motion: {
  path: {
    update: 'rolling',
    x: 'shift',
    y: 'fixed' | 'reproject',
    fallback: 'snap' | 'morph',
  },
}

x: {
  scale,
  viewport: {
    domain: [start, end],
    translate,
  },
}

ChartInteractionController exposes clientToScene, resolvePointer, and setControlledFocus. Marks can declare viewport ownership per axis, while guides remain fixed by default.

Verification

• pnpm validate
• pnpm benchmark:check
• pnpm --filter @charts-poc/react-example build:live
• pnpm --filter @charts-poc/react-example build:paged

The full CI graph passes, including DOM/framework suites, SSR suites, typecheck, docs, bundle policy, packed exports, React Native bare/Expo Metro boundaries, catalog checks, and seven framework adapter gates. Universal and comparison bundle baselines record the reviewed default-contract cost.

[coderabbitai]

Important

Review skipped

Too many files!

This PR contains 105 files, which is 5 over the limit of 100.

To get a review, reduce the PR to 100 files or fewer by splitting it into smaller PRs or changing its base branch.

Upgrade to a paid plan to raise the limit.

This review couldn't start because sufficient usage credits or metered capacity aren't available. Add credits or update usage-based reviews in the billing tab, then retry.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 00805c51-41d4-43e9-bab9-0281ff016728

📥 Commits

Reviewing files that changed from the base of the PR and between 4b6c1f6 and 559b751.

📒 Files selected for processing (105)

• .changeset/live-paths-shift.md
• .gitignore
• API-FRICTION.md
• benchmarks/bundle-size/README.md
• benchmarks/bundle-size/universal-baseline.json
• benchmarks/comparison/bundle-baseline.json
• docs/comparison.md
• docs/concepts/layout-axes-and-coordinates.md
• docs/framework/octane/adapter.md
• docs/framework/react/adapter.md
• docs/guides/custom-marks-and-renderers.md
• docs/guides/dynamic-data-and-animation.md
• docs/guides/interactions-and-selections.md
• docs/guides/themes-and-styling.md
• docs/guides/tooltips-and-focus.md
• docs/reference/chart-definitions.md
• docs/reference/chart-spec.md
• docs/reference/custom-extensions.md
• docs/reference/dom-host.md
• docs/reference/focus-and-interaction.md
• docs/reference/index.md
• docs/reference/marks/bar-and-rect.md
• docs/reference/motion.md
• docs/reference/rendering-and-export.md
• docs/reference/runtime-and-scene.md
• docs/reference/scales-guides-and-color.md
• docs/reference/types.md
• examples/charts-react/live/index.html
• examples/charts-react/live/main.tsx
• examples/charts-react/package.json
• examples/charts-react/paged/index.html
• examples/charts-react/paged/main.tsx
• examples/charts-react/src/App.tsx
• examples/charts-react/src/LiveCharts.tsx
• examples/charts-react/src/PagedHistoryChart.tsx
• examples/charts-react/src/styles.css
• examples/charts-react/vite.live.config.ts
• examples/charts-react/vite.paged.config.ts
• packages/alpine-charts/src/index.ts
• packages/angular-charts/src/Chart.ts
• packages/charts-core/docs/comparison.md
• packages/charts-core/docs/concepts/layout-axes-and-coordinates.md
• packages/charts-core/docs/framework/octane/adapter.md
• packages/charts-core/docs/framework/react/adapter.md
• packages/charts-core/docs/guides/custom-marks-and-renderers.md
• packages/charts-core/docs/guides/dynamic-data-and-animation.md
• packages/charts-core/docs/guides/interactions-and-selections.md
• packages/charts-core/docs/guides/themes-and-styling.md
• packages/charts-core/docs/guides/tooltips-and-focus.md
• packages/charts-core/docs/reference/chart-definitions.md
• packages/charts-core/docs/reference/chart-spec.md
• packages/charts-core/docs/reference/custom-extensions.md
• packages/charts-core/docs/reference/dom-host.md
• packages/charts-core/docs/reference/focus-and-interaction.md
• packages/charts-core/docs/reference/index.md
• packages/charts-core/docs/reference/marks/bar-and-rect.md
• packages/charts-core/docs/reference/motion.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/band.ts
• packages/charts-core/src/canvas.ts
• packages/charts-core/src/configured-scale.test.ts
• packages/charts-core/src/configured-scale.ts
• packages/charts-core/src/dom-types.ts
• packages/charts-core/src/dom.ts
• packages/charts-core/src/focus-mark.test.ts
• packages/charts-core/src/index.ts
• packages/charts-core/src/motion-path.test.ts
• packages/charts-core/src/motion-path.ts
• packages/charts-core/src/motion.test.ts
• packages/charts-core/src/motion.ts
• packages/charts-core/src/nearest.ts
• packages/charts-core/src/renderer.test.ts
• packages/charts-core/src/renderer.ts
• packages/charts-core/src/runtime.test.ts
• packages/charts-core/src/scene-point-map.ts
• packages/charts-core/src/scene.test.ts
• packages/charts-core/src/scene.ts
• packages/charts-core/src/svg-coordinates.ts
• packages/charts-core/src/svg-resources.ts
• packages/charts-core/src/svg-surface.test.ts
• packages/charts-core/src/svg-surface.ts
• packages/charts-core/src/svg.ts
• packages/charts-core/src/tooltip.ts
• packages/charts-core/src/type-contract.test.ts
• packages/charts-core/src/types.ts
• packages/charts-core/src/universal-types.ts
• packages/charts-core/src/universal.ts
• packages/lit-charts/src/Chart.ts
• packages/octane-charts/src/Chart.tsrx
• packages/preact-charts/src/Chart.tsx
• packages/react-charts/src/Chart.test.tsx
• packages/react-charts/src/Chart.tsx
• packages/react-native-charts/src/Chart.test.tsx
• packages/react-native-charts/src/Chart.tsx
• packages/react-native-charts/src/interaction.test.ts
• packages/react-native-charts/src/interaction.ts
• packages/solid-charts/src/Chart.tsx
• packages/svelte-charts/src/Chart.svelte
• packages/vue-charts/src/Chart.ts
• scripts/measure-bundles.mjs
• scripts/public-callback-contract.mjs
• scripts/public-callback-contract.test.mjs

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 559b751

Command	Status	Duration	Result
nx run charts-workspace:ci	✅ Succeeded	1m 3s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-08-05 17:32:21 UTC