Line & area

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

<LiveChart data={data} value={value} accentColor="#22c55e" />

Line styling

Override the stroke with the line prop, and the area fill with gradient:

<LiveChart
  data={data}
  value={value}
  line={{ width: 2, color: "#22c55e" }}
  gradient={{ topOpacity: 0.35, bottomOpacity: 0 }}
/>

Pass gradient={false} to remove the area fill entirely.

Animating the line and fill color

line.color also accepts a SharedValue<string>, and gradient.colors a SharedValue<string[]>. The chart hands them to Skia as they are, so the stroke and the area fill change color on the UI thread with no re-render. Drive both from one progress value to keep them in step:

const progress = useSharedValue(0);
const color = useDerivedValue(() =>
  interpolateColor(progress.get(), [0, 1], ["#a1a1aa", "#22c55e"]),
);
const fill = useDerivedValue(() => [
  interpolateColor(progress.get(), [0, 1], ["rgba(161, 161, 170, 0.35)", "rgba(34, 197, 94, 0.35)"]),
  interpolateColor(progress.get(), [0, 1], ["rgba(161, 161, 170, 0)", "rgba(34, 197, 94, 0)"]),
]);

<>
  <LiveChart
    data={data}
    value={value}
    line={{ color }}
    gradient={{ colors: fill }}
    scrub
  />
  <Button
    title="Fade to green"
    onPress={() => progress.set(withTiming(1, { duration: 400 }))}
  />
</>;

An animated line.color reaches the stroke and the built-in scrub selection dot. The parts that read the line color at render time — a custom selectionDot.component’s color, the segment base color, the area-dot tint, and the threshold split stroke’s rest color — use the palette line color (from accentColor) instead. An animated gradient.colors must hold at least 2 stops at all times, and its positions apply as given, so keep their lengths equal. In the Line & area demo, select Animated line and Default gradient fill. Tap Fade to green, then drag horizontally across the chart while it fades to see the selection dot follow the stroke. The demo offers Default and Off fill in Animated mode; Custom is available with the static line modes.

Dimming replacement data

Keep the current chart visible while fetching a replacement range, then dim only the plotted data through a UI-thread shared value. Axes, reference lines, and scrub controls remain readable.

const seriesOpacity = useSharedValue(1);

function beginReplacementLoad() {
  seriesOpacity.set(0.5);
}

function finishReplacementLoad() {
  seriesOpacity.set(1);
}

<LiveChart data={data} value={value} seriesOpacity={seriesOpacity} />;

seriesOpacity affects the line and area fill, candles and volume bars, value line, badge, and inline value text. While it is below 1, the live dot and its pulse ring fade completely out instead of becoming translucent over the stroke; they fade back in after the series returns to full opacity. Pass the same shared value to a candle chart—no mode-specific configuration is required. The Line & area example’s Dim while loading control demonstrates the transition by pausing its synthetic feed, freezing the current range, and replacing that range when loading completes.

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}:

<LiveChart
  data={data}
  value={value}
  line={{ width: 2, color: "#F7931A" }}
  areaDots={{ spacing: 12, size: 1.6 }} // color defaults to a faint line tint
  gradient={false}
/>

Tune 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 to linear and sharpen the corners:

<LiveChart
  data={data}
  value={value}
  line={{
    width: 1.4,
    curve: "linear", // straight segments instead of the smooth spline
    join: "miter",   // sharp, angular peaks (no corner rounding)
    cap: "butt",     // flat line ends
  }}
/>

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.

Denoising dense paths

Use line.simplify when dense samples make the plotted path look busier than the screen can meaningfully show:

<LiveChart
  data={data}
  value={value}
  line={{ simplify: 1 }} // remove deviations of about one screen pixel or less
/>

The tolerance is measured after points are projected into the chart, so it stays visually consistent across values and canvas sizes. The simplifier retains the line endpoints and peaks or valleys that exceed the tolerance. It only changes the line and area-fill geometry: the original data still drives Y-range fitting, the live value, markers, and scrub callbacks. 0 (the default) disables it; 0.75–1.5 is a useful starting range for subtle denoising. See Line denoising for the raw-vs-simplified example, tolerance guidance, multi-series overrides, and rendering-cost details.

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.

<LiveChart
  data={data}
  value={value}
  badge={{ variant: "default", position: "right" }}
  pulse={{ interval: 2400, maxRadius: 20 }}
  valueLine={{ intervals: [4, 4] }}
/>

The live dot is a color-filled circle with a crisp contrasting outer ring. Style it via dot — the same DotConfig that LiveChartSeries uses. A soft static glow is available separately and remains off unless explicitly enabled:

<LiveChart
  data={data}
  value={value}
  dot={{
    radius: 4,
    ring: { color: "#0b0b0f", width: 3 },
    glow: { radius: 7, blur: 5, opacity: 0.16 },
  }}
  pulse={false} // glow and pulse are independent
  // dot={{ ring: false }}  // flat dot, no backing ring
  // dot={{ show: false }}  // hide the dot
/>

glow: true uses restrained defaults (radius: 7, blur: 5, opacity: 0.18, dot fill color). A config object can tune every value or supply its own color. The glow is a static Skia layer and starts no frame callback; pulse remains the separate expanding-ring animation.

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:

<LiveChart data={data} value={value} showValue valueMomentumColor />

Formatting

Customize axis, badge, and tooltip text with formatValue and formatTime:

<LiveChart
  data={data}
  value={value}
  formatValue={(v) => `$${v.toFixed(2)}`}
  formatTime={(t) => new Date(t * 1000).toLocaleTimeString()}
/>

See the full prop list in the LiveChart reference.

Shared curve calculations

Line and area-fill paths share the curve calculations for each visible segment. Threshold bands use the same curve when geometry changes. Updating only a threshold retains the existing line and area paths. Gaps keep separate contours, so fills do not bridge missing intervals. No configuration change is needed.

Getting started

Chart types

Interaction

Annotations & overlays

Dynamic styling & effects

Styling & theming

Live data & engine

Line styling

Animating the line and fill color

Dimming replacement data

Dotted area fill

Curve & edges

Denoising dense paths

Badge, dot, and value line

Live value overlay

Formatting

Shared curve calculations

​Line styling

​Animating the line and fill color

​Dimming replacement data

​Dotted area fill

​Curve & edges

​Denoising dense paths

​Badge, dot, and value line

​Live value overlay

​Formatting

​Shared curve calculations

Line styling

Animating the line and fill color

Dimming replacement data

Dotted area fill

Curve & edges

Denoising dense paths

Badge, dot, and value line

Live value overlay

Formatting

Shared curve calculations