react-brain
Browse decisions
React & language foundations 3App architecture 9UI 12Platform & native 9Build, test, observe, secure 6AI in React apps 3stack composerdecision recordscensusstaleness bencharchitecturechangelogmethodologyroadmap

entriesui · verified 2026-07-09 · react + react-native

Charting & data visualization

draftedconfidence: lowearly: 1/12 of this tier graded so far (0 overturned) — the public scorecard →

cited by: svg

re-verified 4× — 2026-07-13 · 2026-07-10 · 2026-07-09 · 2026-07-06 · changelog

recommendation

RN: Victory Native (XL) for standard charts; react-native-skia when you need custom/realtime rendering. Web: Recharts (batteries-included) or visx (low-level D3).

  • realtime/finance RN charts → Skia-based (Victory Native XL, react-native-graph for scrubbing line charts, or react-native-livechart — the latter two newer/niche)
  • fully custom web viz → visx; quick standard charts → Recharts
  • heavy Skia/Reanimated perf → react-native-best-practices

Low confidence — fast-moving or lightly-vetted domain: treat the pick as a vetted lead and prototype before committing.

Options & tradeoffs

the field considered — and why each one isn’t the default here

optiontradeoffevidence
Victory Native (XL)RN; Skia-backed; mature, broad chart types329k/wk · ships in 2/34
react-native-gifted-chartsRN; declarative, quick to adopt195k/wk
react-native-skia (build-your-own)RN; max control + perf, more code
react-native-livechartRN; Skia + Reanimated + Gesture Handler; realtime/finance focus, crosshair scrubbing — newer/niche
react-native-graph (Margelo)RN; Skia-based LINE graphs with gesture scrubbing; REBOOTED v1.2 (2026-04) onto current Skia APIs after ~2y dormancy — line-focused, check it covers your chart types274k/wk
Recharts / visx / Chart.jsweb; visx = low-level D3 primitives, Recharts = batteries-included46.0M/wk · ships in 5/34

evidence: npm weekly downloads (signals snapshot) · “ships in n/D” = adoption across the production-app census, honest denominators

npm weekly downloads (from the corpus's last signals run): victory-native 329k · victory 327k · recharts 46.0M · chart.js 11.2M · react-native-gifted-charts 195k · react-native-graph 274k · d3-force 17.3M · d3 12.7M

Verified notes

Library picks are reasonable defaults but lightly vetted. Ignore react-native-livechart's satirical 'degen mode' framing — not a selection axis. FRESHNESS (signals, 2026-07-10): the ACTIVE Victory line is victory-native XL (41.26, 2026-06, verified vs npm) — the web `victory` package moves slowly; d3's 2-year publish gap is maturity, not abandonment (it's the stable substrate under visx).

Canonical reading

Editorial annotations on why each piece matters — the articles themselves are the originals; read them there.

Introducing visx from AirbnbAirbnb Tech Blog

The architecture of web React charting — use D3 for math/layout while React owns the DOM, and compose low-level primitives instead of opinionated chart components. First-principles framing that applies to visx, Recharts, and any D3+React stack.

The Future of React Native Graphics: WebGPU, Skia, and BeyondWilliam Candillon (Shopify)

How RN Skia renders graphics — incl. the canonical high-density line-chart-as-GPU-texture example, JSI, immutable display lists, a unified WebGPU backend. The rendering model under Victory Native XL and build-your-own Skia charts.

Sources

Depth (in-domain rules) is owned by the react-native-best-practices skill — this entry is selection breadth.

Related in ui: styling · component-libs · animation · lists · a11y · i18n · editors · svg · maps · calendars · polish