LiveChartSeries draws several line series sharing an axis, time window, and crosshair. It
accepts all the shared theming, axis, range, layout, and text props from
LiveChart (theme, accentColor, palette, metrics, font,
canvasMode, timeWindow, smoothing, snapKey, yAxis,
referenceLines, formatValue, …), plus the multi-series props below.
On Android, the shared experimental canvasMode="opaque" option selects an opaque SurfaceView and
paints the palette background inside the canvas. See
Android surface rendering for constraints and profiling guidance.
Custom overlays
(ctx: ChartOverlayContext) => ReactElement | null
Render a full-bleed custom React Native overlay with the live price↔pixel /
time↔pixel bridge.
ChartOverlayContext
includes the resolved plot rectangle, so custom off-axis tags and connectors can
stop at the same axis inset as the chart. Return null or undefined for no
overlay. See Overlay bridge.Reference-line tags
(ctx: ReferenceLineRenderProps) => ReactElement | null
Replace a Form-A reference line’s built-in Skia badge or gutter label with any
React Native element. Return
null or undefined for per-line fallback to the
built-in tag. The custom view tracks the line’s live Y position, pins to the
nearest plot edge when off-axis, and respects left, center, and right badge
positions. A left- or right-pinned badge keeps its dashed connector, beginning
after the measured custom view. The reference-line stroke remains visible. See
Reference lines and bands.(ctx: ReferenceLineRenderProps) => ReactElement | null
Replace only an off-axis Form-A tag. The standard Skia tag or gutter label stays
in range, while the custom React Native view takes over when the line is pinned
above or below the plot. A left- or right-pinned
badge (or legacy
offAxisBadge) retains its dashed connector from the custom view’s measured
edge. Return null for lines that opt out, and use ctx.edge inside the
returned component for a directional caret. See
Reference lines and bands.Series data
SharedValue<SeriesConfig[]>
required
Array of series definitions. Read on the UI thread. See
SeriesConfig.Axis labels
Shared withLiveChart. Both
default off.
boolean | AxisLabelConfig
default:"false"
Edge label at the plot’s top.
true shows the built-in value label — the
chart’s current top Y-axis bound, updated each frame. Pass
AxisLabelConfig (format / color /
position) or { render } for a custom element.boolean | AxisLabelConfig
default:"false"
Edge label at the plot’s bottom (the current bottom Y-axis bound), with the
same options as
topLabel.Legend
boolean | LegendConfig
default:"true"
Toggle chips. Configure
position, compact, and style.(id: string, visible: boolean) => void
Fires when a legend chip is tapped.
Dots
boolean | MultiSeriesDotConfig
default:"true"
Per-series live dots:
radius, ring, color, pulse, valueLine,
valueLabel. Each dot is haloed with a contrasting outer ring by default
(matching the single-series live dot); pass ring: false for a flat circle,
dot={false} to hide the dots, or color to override the per-series fill.
(The deprecated dot={{ show: false }} still hides them.)Scrub
boolean | ScrubConfig
default:"true"
Crosshair scrubbing on drag. As of v2 this defaults to
true (it previously
defaulted to false); pass scrub={false} to disable. The existing default is
a guide/dim layer. Omitting seriesTooltip (or setting it to false) preserves
that behavior. Set scrub.seriesTooltip to opt into the Morfi-style
time-range pill, one colour/value pill and intersection dot per visible series,
collision stacking, and edge flipping. seriesTooltip.alwaysShow keeps value
pills pinned to the visible endpoints while idle without showing the guide or
time pill. The existing scrub.tooltip={false} switch remains the master
tooltip control and also suppresses the per-series pills. See
Multi-series tooltips.
crosshairFadeDistance and crosshairLineCap style the visible guide,
selection dot, and tooltip consistently with LiveChart.boolean | SelectionDotConfig
default:"false"
Dot drawn at the scrub intersection while scrubbing. Hidden by default on
LiveChartSeries (unlike LiveChart): with multiple lines the dot can only
track the leading series, so the crosshair and the opt-in tooltip’s per-series
intersection dots mark the scrub point instead. Pass true to opt in (it anchors to the leading series),
a config to set size / color / ring, or { component } for a fully
custom Skia dot. See Scrubbing.(point: ScrubPointMulti | null) => void
Worklet callback fired on the UI thread each frame while scrubbing;
null when it ends.
Includes a per-series value array. See Scrubbing.() => void
JS-thread callback fired once when the user starts scrubbing. Respects
scrub.panGestureDelay (it fires when the pan activates, not on first touch).() => void
JS-thread callback fired once when the user stops scrubbing. Fires only if a
scrub actually started — a tap that never activates emits neither callback.
boolean | TimeScrollConfig
default:"false"
Pan back through history (same as
LiveChart). Drag (or fling) to scroll; the
chart stops auto-following until you return to the live edge. Setting it back to
false while scrolled back glides the window back to the live edge (eased, not
an instant jump; never frozen at the old position). Per-series dots / value
labels track each series’ value at the visible right edge while scrolled.
@experimental. See Time-scroll.boolean | ReturnToLiveConfig
default:"true"
Controls the glide back to live when
timeScroll is switched off while scrolled
back (same as LiveChart). true (default) eases over 450 ms, false snaps
instantly, { duration } sets a custom length. Sibling of timeScroll so it
survives timeScroll={false}. @experimental. See
Time-scroll → Turning it back off.boolean | ZoomConfig
default:"false"
Pinch-to-zoom the visible window (same as
LiveChart), anchored at the focal
point. Composes with timeScroll. @experimental. See
Time-scroll.(range: VisibleRange) => void
Called as the visible window changes (~1 Hz) with
{ startSec, endSec, following }. @experimental.() => void
Called once when the left edge nears the earliest retained data — the cue to
page in older history. @experimental.
Degen
boolean | DegenOptions
Chart shake + spark burst off the leading series’ dot on an upward swing.
(payload: DegenShakePayload) => void
JS-thread callback when a degen shake starts.