Multi-series

LiveChartSeries draws multiple line series that share an axis, time window, and crosshair. Pass a SharedValue<SeriesConfig[]>.

Live example: app/demo/multi-series.tsx in the example app.

Multiple live series with a toggleable legend

import { useSharedValue } from "react-native-reanimated";
import { LiveChartSeries, type SeriesConfig } from "react-native-livechart";

const series = useSharedValue<SeriesConfig[]>([
  { id: "btc", label: "BTC", color: "#f7931a", data: [], value: 0 },
  { id: "eth", label: "ETH", color: "#627eea", data: [], value: 0 },
]);

<LiveChartSeries series={series} legend dot />;

Update the series the same way you feed a single chart — append points in place with series.modify(...) (mutating each entry’s data array and value), or replace the whole array with series.set(...). Avoid series.value = ....

Series options

Each SeriesConfig supports:

Field	Purpose
`id`	Stable identifier (required)
`data`	`LiveChartPoint[]` history (required)
`value`	Latest live value for interpolation (required)
`color`	Line color (falls back to the built-in series palette)
`label`	Legend chip text
`visible`	Show/hide the series (default `true`)
`style`	`"solid"` or `"dashed"` (with `intervals`)
`curve`	`"monotone"` (default) smooth spline or `"linear"` straight segments
`strokeWidth`	Per-series width override
`glow`	Soft glow behind the line
`kind`	`"outcome"` (default) or `"derived"` (subdued/dashed chip)

Legend

The legend renders toggle chips by default. Configure it with the legend prop, and listen for taps with onSeriesToggle:

<LiveChartSeries
  series={series}
  legend={{ position: "top", compact: false }}
  onSeriesToggle={(id, visible) => {
    // Persist the toggle back onto the series shared value.
    series.set(series.get().map((s) => (s.id === id ? { ...s, visible } : s)));
  }}
/>

Per-series dots

The dot prop controls the live dots, their pulse, value lines, and inline labels. Each dot is haloed by default — a contrasting outer ring (in the chart background color) behind the colored dot, matching the single-series live dot so overlapping series stay legible:

<LiveChartSeries
  series={series}
  dot={{ radius: 3.5, ring: true, pulse: true, valueLine: true, valueLabel: true }}
/>

Tune or turn off the halo, hide the dots, or override the fill color:

<LiveChartSeries
  series={series}
  // thicker, tinted halo
  dot={{ ring: { color: "#0b0b0f", width: 3 } }}
  // ...or a flat circle (no halo)
  // dot={{ ring: false }}
  // ...or hide the dots entirely (lines + labels still render)
  // dot={{ show: false }}
/>

See the full prop list in the LiveChartSeries reference. LiveChartSeries keeps its historical guide-only scrub by default. Opt into the Morfi market-detail readout with scrub.seriesTooltip: a dashed vertical guide, a top-centred bucket range, and one pill plus intersection dot for every visible series. Close values stack instead of overlapping, wide pills flip to the guide’s left near the right edge, and hidden legend series are omitted.

This feature is opt-in and backward compatible. scrub={true}, scrub={{}}, and scrub={{ seriesTooltip: false }} all keep the existing guide-only multi-series behavior. The existing scrub.tooltip property is still the master switch; setting it to false also suppresses the per-series pills.

Enable the default tooltip treatment with:

<LiveChartSeries
  series={series}
  scrub={{ seriesTooltip: true }}
/>

Pass an object instead of true to customize formatting and appearance:

<LiveChartSeries
  series={series}
  scrub={{
    seriesTooltip: {
      formatSeriesValue: (value, seriesId) => {
        "worklet";
        return seriesId.startsWith("probability")
          ? `${(value * 100).toFixed(1)}%`
          : `$${value.toFixed(2)}`;
      },
      formatTimeRange: (from, to) => {
        "worklet";
        return `${formatTime(from)} – ${formatTime(to)}`;
      },
      maxLabelChars: 14,
    },
  }}
/>

formatSeriesValue and formatTimeRange run on the UI thread; keep them worklet-safe, just like the chart’s formatValue and formatTime. Omit bucketSeconds to infer the range width from the first visible series. The range end is always clamped to the chart’s current-time anchor, so an in-progress live bucket never displays a future end time. Set alwaysShow to keep the value pills at the visible endpoints while the user is not touching the chart. Idle mode deliberately hides the guide and time pill; scrubbing restores the full readout.

<LiveChartSeries
  series={series}
  scrub={{
    seriesTooltip: {
      alwaysShow: true,
      guideColor: "#f59e0b",
      guideDashPattern: [3, 3],
      timePillBackground: "#1e293b",
      seriesPillBackground: "#1e293b",
      seriesPillLabelColor: "#94a3b8",
      seriesPillValueColor: "#f8fafc",
      seriesPillRadius: 10,
      intersectionDotSize: 8,
    },
  }}
/>

The multi-series demo has live toggles for the pills, pinned mode, and styling.

Getting started

Chart types

Interaction

Annotations & overlays

Dynamic styling & effects

Styling & theming

Live data & engine

Series options

Legend

Per-series dots

Per-series scrub tooltip

​Series options

​Legend

​Per-series dots

​Per-series scrub tooltip

Series options

Legend

Per-series dots

Per-series scrub tooltip