LiveChart renders a single line series by default. History comes from a
SharedValue<LiveChartPoint[]> and the live tip from a SharedValue<number>.
Live example:
app/demo/line-and-area.tsx
in the example app.Line & area
Line styling
Override the stroke with theline prop, and the area fill with gradient:
gradient={false} to remove the area fill entirely.
Dotted area fill
For a textured fill,areaDots paints a screen-fixed dot lattice clipped to the
area beneath the line (the line scrolls over the dots; nothing is drawn above
it). It composes with gradient, or use it alone with gradient={false}:
spacing (lattice pitch), size (dot diameter), color, and opacity.
Like gradient, it’s a line-mode feature (inert in candle mode).
Live example:
app/showcase/kraken.tsx
pairs the dotted area fill with a thin line, Y-axis labels, and a dashed scrub
crosshair.Curve & edges
By default the line is a smooth monotone cubic with rounded joins and caps. For an angular, hard-edged look — think the Robinhood tokenized-stock style — switch the interpolation tolinear and sharpen the corners:
curve ("monotone" | "linear"), join ("round" | "miter" | "bevel"),
and cap ("round" | "butt" | "square") are independent — e.g. keep the
smooth curve but flatten the ends with cap: "butt". curve: "linear" applies to
the area fill as well, so the gradient follows the same straight segments.
Live example:
app/showcase/robinhood.tsx
pairs all three for a fully hard-edged line.Badge, dot, and value line
By default the chart draws a value badge at the tip, a pulsing live dot, and (optionally) a dashed value line across the plot.dot — the same DotConfig that LiveChartSeries uses:
Most boolean-ish props accept
true (defaults), false (off), or a config object — for
example badge, pulse, valueLine, gradient, scrub, and yAxis.Live value overlay
Render the current value as large text in the top-left, optionally tinted by momentum:Formatting
Customize axis, badge, and tooltip text withformatValue and formatTime:
LiveChart reference.