Skip to main content
All types are exported from the package root:
The source .d.ts and JSDoc remain the canonical reference (your editor surfaces them on hover); the most-used shapes are reproduced here.

Data

CanvasMode controls whether the Skia canvas participates in transparent composition or owns its background. On Android, opaque mode selects SurfaceView. See Android surface rendering.
Both chart components accept these shared opacity and range controls:
seriesOpacity dims plot data (line and area fill, candles, value lines, badges, and inline values) without dimming axes, legends, reference lines, or scrub UI. While it is below 1, live dots and pulse rings fade completely out so a dimmed stroke cannot show through them; they return once the multiplier reaches 1. See Line & area or Multi-series. minRange widens a narrower bounded fit, shifting off zero or the ceiling. Hard bounds win if the floor cannot fit; invalid or overflowing floors are ignored. Manual yRangeScale applies afterward and can zoom below the floor. See Minimum Y range for the interactive comparison. The experimental frame-loop controls are available on LiveChart:
See Scroll interaction for the parent-scroll gate and the counter’s measurement limits.

Momentum

Annotations

Scrub payloads

LiveChart exposes these JS-thread callbacks:
The per-candle callback does not stream updates within the same candle. For continuously updated OHLC, use onScrub or the UI-thread renderTooltip values. See Candle feedback for the interactive comparison.

Config objects

These are the option shapes accepted by the matching props.

RangeAnimationConfig

Exported config for the shared rangeAnimation prop on LiveChart and LiveChartSeries.
Speeds are per-60fps-frame fractions of the remaining gap, using frame-rate-independent exponential easing. Finite overrides clamp to 0..1; non-finite overrides inherit smoothing. While the fitted and displayed ranges do not overlap, contraction is limited to the animated expansion speed so the bounds cannot cross. smoothing: 1, explicit snaps, static mode, and active manual Y-scale dragging take precedence. Axis-label fades remain under metrics.grid. See Y-range animation.

SeriesRangeAnimationConfig

Exported LiveChartSeries config extending RangeAnimationConfig with a reversible UI-thread range transform. Its first measured, visible data fits immediately; direction-specific easing applies to subsequent updates:
The worklet may read SharedValues. Its output changes presentation after normal fit/easing; it never changes recorded values or feeds the next fit. Removing it restores the untransformed range. Non-finite, equal or inverted bounds are ignored. Configured hard bounds apply to the underlying fit before transforming. Existing expansion/contraction speeds, snaps and manual scaling apply to that fit.

Imperative handle

LiveChart and LiveChartSeries accept a ref with the same exported handle:
Use useRef<LiveChartHandle>(null) and pass the ref to either chart. A paused chart remains paused. See Time-scroll → Reset zoom from a button. On LiveChart with viewport, resetZoom() clears the supplied end and window shared values. In a sync group, reset the leader and mirror its drawn return.

AxisLabelConfig

Shape for the topLabel / bottomLabel props. Both are opt-in (default off). With true, the chart floats its current top (topLabel) / bottom (bottomLabel) Y-axis bound at that edge, formatted with format (falling back to the chart’s formatValue) in color (falling back to the muted palette.gridLabel), aligned by position. The values track the live Y-axis range each frame on the UI thread. Set render to float a fully custom element at the edge instead of the built-in value. position: "extrema" instead floats the label (a dot + value, or your render element) at the actual data point where the high / low occurs, tracking it as the chart scrolls. See Axis labels and Marking the extrema points.

SelectionDotProps

Props passed to a custom selectionDot.component — the dot drawn at the scrub intersection. Every positional input is a SharedValue, so the dot animates on the UI thread without re-renders.

ScrubMarkerConfig

scrub.markers is available on LiveChart and LiveChartSeries. true uses the default tolerance; an object configures it:
Negative radii clamp to 0; omitted or non-finite radii use 16. In line mode, timestamps must be within the drawn time window and the tolerance around the crosshair. Candle mode ignores the radius and selects the hovered bucket’s [candle.time, candle.time + candleWidth) interval. No candle or a declared gap selects none. Matches retain input order and data, regardless of glyph Y, side, stacking, collapsed groups, or maxVisible. Matching uses all supplied markers, including markers associated with a hidden series; filter the input if those trades should be excluded. No matching work runs while scrubbing is inactive.

TooltipRenderProps

Context passed to a custom renderTooltip — the fully custom scrub tooltip. The element you return is a React Native view the chart floats over the canvas and positions on the UI thread (per scrub.tooltipPlacement). Every live field is a SharedValue, so bind them to animated text (e.g. an Animated.createAnimatedComponent(TextInput) driven by useAnimatedProps) and both movement and text stay on the UI thread — no JS re-render while scrubbing. See Custom tooltip.

ChartOverlayContext

The price↔pixel / time↔pixel bridge passed to a custom renderOverlay on LiveChart or LiveChartSeries. It hands you a single per-frame scale SharedValue plus pure mapping worklets.
Easiest path — the usePriceY / useTimeX hooks. They project a price / time to a SharedValue<number> that tracks the live axis for you. Render one component per level and read the value in your useAnimatedStyle:
Manual path. Read scale.get() inside your worklet — that read subscribes it to the live scale — then feed the snapshot to the pure mappings. (Reanimated only observes SharedValues read directly in a worklet’s closure, so the mappings take the snapshot as an argument rather than reading it themselves.)

DegenOptions

The most-used fields (see the source for the full tuning surface):

Palette

accentColor + theme derive a full LiveChartPalette. Override any subset via the palette prop. Frequently overridden keys:

Metrics

The geometry/motion analogue of LiveChartPalette. Override any subset via the metrics prop (per-namespace shallow merge — only the keys you set are replaced). See the Theming guide.

Right-anchored axis layout

YAxisConfig.labelRightMargin also selects automatic gutter sizing from the actual painted tick column in both charts. Padding includes column width, edge margin, the largest dot/pulse/glow outset and six points of clearance. Initial samples add half a font-size of headroom until ticks exist. Width changes alone trigger React layout updates. Explicit right insets and badge requirements retain priority; centered, left and floating layout behavior is unchanged.

LiveChartSeries presentation clock

LiveChartSeriesProps.presentationTime?: SharedValue<number | undefined> drives current time on the UI thread. Defined Unix seconds take precedence over nowOverride/wall time; undefined restores that fallback. Paths and range fits exclude future samples while a head is supplied; tips and dots stop at the presentation head or viewport edge, whichever is earlier. The scrub time limit uses the same clock. See Replay clock.

LiveChartSeries history start

LiveChartSeriesProps.historyStartTime?: number is an authoritative Unix-second start for a growing live window. With no pan/zoom override, the displayed width is (now - historyStartTime) / (1 - windowBuffer). Buffer must be in [0, 1); invalid/future starts use timeWindow. resetZoom() resumes the growing view. Default pinch maximum includes this full span, independent of retained sample timestamps. Explicit zoom bounds take precedence, including maxima smaller than timeWindow. See All history.