v3.3.0 — Segments

Segments — scrub-focus session segmentation

Adds segments?: ChartSegment[] to the single-series LiveChart for Robinhood-style session segmentation (pre-market / regular / after-hours, overnight windows).

At rest the line is one uniform color; while scrubbing — or when a segment is active — the focused segment (under the scrub line, or the active one) keeps the base color and every other segment is de-emphasized by recoloring the line stroke itself (an alpha-reduced color fades the line; no overlay panel). New exported type: ChartSegment. Single-series only.

Added

• mutedColor / mutedColors — the de-emphasis color (solid, or a ≥2-stop gradient) used when a segment is not the focused one.
• active — force-focus a segment without scrubbing.
• recolorLine (default true) — set false to opt a segment out of the dimming entirely (it still draws its divider/label).
• divider + label (with labelPosition / dividerColor) — a dashed edge marker and caption; the label shows only with the divider.
• All colors default to the chart palette, so a bare { from, to } segment works without setting any color.

Fully backward-compatible — no changes required to existing code.

npm install react-native-livechart@3.3.0

Full changelog: https://github.com/brandtnewlabs/react-native-livechart/blob/main/CHANGELOG.md

v3.2.0

Minor release — additive and backward-compatible. No API removals, no peer-dependency changes.

Added

• Gradient line strokes — LineConfig.colors?: string[] applies two or more CSS colors as a horizontal gradient along the chart line stroke (left → right), e.g. line={{ colors: ["#ff0000", "#0000ff"] }}. The existing color?: string is unchanged and still sets a solid stroke; colors takes precedence when both are set. Single-series only. The fill-gradient analogue is GradientConfig.colors (added in 3.0.0).

Thanks to @kyrylokap for this contribution (#97)! 🎉

Full changelog: https://github.com/brandtnewlabs/react-native-livechart/blob/main/CHANGELOG.md

v3.1.0

Minor release — all changes are additive and backward-compatible. No API removals, no peer-dependency changes.

Added

• Scrub gesture callbacks — onGestureStart / onGestureEnd on both LiveChart and LiveChartSeries, fired when a scrub interaction begins and ends (e.g. pause a parent carousel or disable list scrolling while scrubbing).
• selectionDot on both charts — customize the dot drawn at the scrub position: boolean | SelectionDotConfig with size, color, ring (boolean | SelectionDotRingConfig), or a fully custom component (ComponentType<SelectionDotProps>). New exported types: SelectionDotConfig, SelectionDotRingConfig, SelectionDotProps.
• Multi-color area-fill gradients — GradientConfig.colors?: string[] (with optional positions?: number[]) renders a custom multi-stop fill, mirroring react-native-graph's gradientFillColors. Omit for the existing two-stop top/bottom fallback. Single-series only.
• Axis labels — topLabel / bottomLabel (boolean | AxisLabelConfig) on both charts draw labels at the high/low of the visible range (Robinhood-style), with format, color, position, or a custom render render-prop. New type: AxisLabelConfig.
• static mode — static={true} on LiveChart renders a non-animated, gesture-free sparkline, cheap enough for long lists.

Performance

• The degen particle burst now renders through a single drawAtlas call instead of a per-particle <Circle> fan-out (one shared pre-rasterized sprite plus per-instance transforms/colors), cutting per-frame CPU on dense bursts.

Full changelog: https://github.com/brandtnewlabs/react-native-livechart/blob/main/CHANGELOG.md

v3.0.0

⚠️ Breaking

• @shopify/react-native-skia >=2.6.0 is now required (peer dependency raised from >=2.0.0). The chart now builds paths with Skia.PathBuilder / detach(), introduced in Skia 2.6.0 — on older Skia it throws at runtime (Skia.PathBuilder is undefined). Upgrade Skia to 2.6.0+ before upgrading this package. No public API of this library changed.

Changed

• All per-frame path building — line, fill, candles, badge, Y/X axes & grid, value lines, reference lines/bands, markers, and the loading squiggle — migrated from the pooled mutable-SkPath + ping-pong pattern to a reused Skia.PathBuilder finalized with detach(). Drops the two-buffer ping-pong and is forward-compatible with Skia's move to an immutable SkPath.

Performance

• The migration is performance-neutral: on-device profiling (iPhone 17 Pro / iOS 26.4, 3-series scene) measured equivalent frame rate (60fps), CPU, and flat memory versus the previous pooled-path approach.

📦 npm i react-native-livechart@3.0.0

v2.0.1

Documentation patch — no code changes from 2.0.0.

The library's documentation is now available as a hosted MCP server. Point an
AI assistant (Claude, Cursor, any MCP client) at it to search and cite the docs:

https://react-native-livechart.brandtnewlabs.com/mcp

npm install react-native-livechart@2.0.1

📖 Documentation · 📦 npm · 📝 Changelog

v2.0.0

First major release. Highlights: a new metrics design-token prop, a uniform
feature-flag API, and a scrub-performance fix.

npm install react-native-livechart@2.0.0

⚠️ Breaking changes — migrating from 1.x

• LiveChartSeries now scrubs by default. scrub defaulted to false; it now
  defaults to true, matching LiveChart. Pass scrub={false} to restore the
  old behavior. (Legend taps are unaffected — chips sit outside the scrub gesture.)
• DotConfig.show is deprecated in favor of dot={false} to hide the live
  dot. dot={{ show: false }} still works and is equivalent — no rush to migrate.
• Every overlay toggle now follows the same boolean | Config convention
  (badge, gradient, pulse, valueLine, scrub, yAxis, xAxis,
  leftEdgeFade, legend, and now dot). This is additive for everything except
  the two items above.

See the Migrating to v2 section in the README.

✨ Added

• metrics prop on both charts — sizing & motion design tokens, the
  geometry/feel analogue of palette. Namespaced (badge, candle, grid,
  motion, emptyState) with per-key overrides, exposing previously-hardcoded
  constants (badge pill geometry, candle body bounds, grid/axis fade and lerp
  speeds, empty-state layout). New types: LiveChartMetrics,
  LiveChartMetricsOverride, and the five namespace interfaces.
• dot accepts a boolean on both charts (dot={false} to hide).

🐛 Fixed

• Crosshair overlays no longer emit React's "final argument changed size between
  renders" error while scrubbing (a React Compiler × Reanimated auto-dependency
  interaction; the affected useDerivedValues now use explicit deps).

⚡ Performance

• The line is decimated to ~2 points per horizontal pixel (min/max per pixel
  column — envelope and volatility spikes preserved). Dense or wide time windows no
  longer make per-frame work scale with sample count, fixing the sustained-scrub
  frame drops on saturated windows. Sparse windows are unchanged.

---

📖 Documentation · 📦 npm · 📝 Full changelog

Demo media

Compressed demo clips, poster frames, and the hero GIF referenced by the README and documentation. Not a code release.

v1.1.0

Second release — configurable live dots, press-and-hold scrubbing, scrub-dim fixes, and a scrubbing performance fix.

Added

• LiveChart dot prop — style the single-series live dot: radius, ring
  (the haloed outer ring), show, and color.
• LiveChartSeries dot gains ring, show, and color.
• Shared DotConfig type for both charts (MultiSeriesDotConfig extends it),
  plus DotRingConfig.
• scrub.panGestureDelay — a press-and-hold delay (ms) before scrubbing
  activates, so a quick horizontal swipe falls through to a parent gesture
  (e.g. a navigator's swipe-back-to-previous-route). Defaults to 0 (immediate).

Changed

• Multi-series dots now render a contrasting outer ring (halo) by default,
  matching the single-series live dot. Pass dot={{ ring: false }} for flat
  circles.
• The single-series live dot's default outer radius is now 6.0px (was 6.5px),
  from the shared 2.5px ring width. Pass dot={{ ring: { width: 3 } }} to
  restore the previous size.

Fixed

• The scrub dim now fully covers the live dot and its pulse ring while
  scrubbing (previously only the left half was dimmed), on both charts. The
  live-price badge and per-series value labels are drawn above the dim so they
  are no longer clipped, and the dim stops short of the Y-axis labels.

Performance

• The scrub tooltip no longer calls Skia measureText on every frame; it sizes
  the monospace text by character count instead. Fixes a UI-thread frame-rate
  drop while scrubbing.

---

📦 npm: https://www.npmjs.com/package/react-native-livechart/v/1.1.0
📖 Full changelog: https://github.com/brandtnewlabs/react-native-livechart/blob/main/CHANGELOG.md

v1.0.0

[1.0.0] - 2026-06-04

Initial public release.

Added

• LiveChart — single-series line/candlestick chart with scrubbing, badges, trade
  markers, momentum detection, and degen effects.
• LiveChartSeries — multi-series line chart with a toggleable legend, per-series live
  dots, value lines, and a crosshair.
• LiveChartTransition — helper for animating between chart states.
• Hooks: useDegen, useTradeStream.
• Utilities: formatTime, formatValue, MONO_FONT_FAMILY.
• Light/dark theming with accent-driven palettes; loading (breathing-line) and paused
  states.

Packaging

• The package ships TypeScript source (src/); your app's Metro + Babel pipeline
  compiles it with your own Reanimated/Worklets version. dist/ contains only .d.ts
  declarations — there is no precompiled runtime dist/*.js.