LiveChart

Props for the single-series line / candlestick component.

import { LiveChart } from "react-native-livechart";

LiveChart renders one series in line or candlestick mode. Props marked required must be provided; everything else has a default.

Data

data · SharedValue<LiveChartPoint[]> · required

Growing array of { time, value } points. Read on the UI thread.

value · SharedValue<number> · required

Latest live value, interpolated between data updates.

Display mode

mode · "line" | "candle" · default: "\"line\""

Line/area or OHLC candlestick rendering.

candles · SharedValue<CandlePoint[]>

Committed OHLC bars, sorted by time (candle mode).

candleWidth · number

Seconds per candle bucket (e.g. 60 for 1-minute bars).

liveCandle · SharedValue<CandlePoint | null>

In-progress candle, updated each tick; null between buckets.

Line, fill & tip

line · LineConfig

Main line styling: width, color.

gradient · boolean | GradientConfig · default: "true"

Area fill under the line.

badge · boolean | BadgeConfig · default: "true"

Value badge pill at the tip.

pulse · boolean | PulseConfig · default: "true"

Pulsing ring on the live dot.

valueLine · boolean | ValueLineConfig

Horizontal dashed line at the current value.

showValue · boolean · default: "false"

Render the live value as large top-left text.

valueMomentumColor · boolean · default: "false"

Tint the showValue text by momentum (green up / red down).

Momentum & degen

momentum · boolean | "up" | "down" | "flat" | MomentumConfig · default: "true"

Momentum-based dot/badge coloring. See Momentum & degen.

degen · boolean | DegenOptions

Particle burst + screen shake on momentum swings.

onDegenShake · (payload: DegenShakePayload) => void

JS-thread callback when a degen shake starts.

Trades, markers & references

tradeStream · SharedValue<TradeEvent[]>

Live trade fills for on-chart markers.

markers · SharedValue<Marker[]>

Glyph markers drawn into the canvas (UI-thread read).

onMarkerHover · (event: MarkerHoverEvent | null) => void

Fires when a marker is tapped; null on a miss.

markerHitRadius · number · default: "16"

Tap hit-test radius in px.

referenceLines · ReferenceLine[]

Reference lines / bands (horizontal line, value band, or time band).

Scrubbing

scrub · boolean | ScrubConfig · default: "true"

Crosshair scrubbing on drag.

onScrub · (point: ScrubPoint | null) => void

Fires while scrubbing; null when it ends.

Axes, grid & range

xAxis · boolean | XAxisConfig · default: "true"

Time-axis labels.

yAxis · boolean | YAxisConfig · default: "true"

Value-axis grid + labels.

gridStyle · GridStyleConfig

Grid-line color / width / dash / opacity.

timeWindow · number · default: "30"

Visible window in seconds.

paused · boolean · default: "false"

Freeze scrolling; resume catches up to real time.

loading · boolean

Breathing-line loading shell until data is ready.

smoothing · number · default: "0.08"

Value-lerp speed (0 = frozen, 1 = instant).

exaggerate · boolean · default: "false"

Tight Y-axis so small moves fill the height.

nonNegative · boolean · default: "false"

Clamp the Y-axis lower bound at 0.

maxValue · number

Hard upper bound for the Y-axis range.

windowBuffer · number · default: "0"

Right-edge buffer as a fraction of timeWindow.

nowOverride · number

Override the engine’s “now” (unix seconds) — useful for historical playback.

Theming & layout

theme · "light" | "dark" · default: "\"dark\""

Color scheme.

accentColor · string · default: "\"#3b82f6\""

Primary accent; the palette is derived from it.

palette · Partial<LiveChartPalette>

Override individual resolved-palette keys.

font · FontConfig

Font family / size / weight / custom typeface for all chart text.

leftEdgeFade · boolean | LeftEdgeFadeConfig · default: "true"

Soft fade on the left edge.

insets · ChartInsets

Padding for the drawing area (top, right, bottom, left).

style · ViewStyle

Container View style.

Text & accessibility

formatValue · (v: number) => string

Formatter for value labels (axes, badge, tooltips).

formatTime · (t: number) => string

Formatter for time labels.

emptyText · string · default: "\"No data\""

Label shown when there are fewer than two samples and loading is false.

accessibilityLabel · string

Accessibility label for the chart container.

accessibilityRole · "image" | "none" | "adjustable" | "summary" · default: "\"image\""

Accessibility role for the container.

Config-object types (LineConfig, BadgeConfig, DegenOptions, ReferenceLine, etc.) are documented in the Types reference.