Threshold split

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

const breakEven = useSharedValue(100); // move it live with breakEven.set(...)

<LiveChart data={data} value={value} threshold={{ value: breakEven }} />;

• fill — tints the area between the line and the threshold (the profit/loss band) toward the above/below colors. It’s independent of the baseline gradient fill, so set gradient={false} for the band alone. true uses the default band opacity (0.16, matching reference-line bands); pass { opacity: 0.35 } to tune it.
• line — a dashed marker line at the threshold. true draws just the line; pass a ThresholdLineConfig to add a label badge (labelColor overrides the label’s text color, like ReferenceLine.labelColor).
• includeInRange — fold the threshold into the Y-axis range fit, like reference lines do. Without it the range fits the data alone, so a benchmark outside the price range renders invisibly (marker off-plot, whole line one color). Default false.

<LiveChart
  data={data}
  value={value}
  gradient={false}
  threshold={{
    value: breakEven,
    aboveColor: "#16a34a",
    belowColor: "#dc2626",
    fill: true,
    // object → labelled badge; `line: true` → marker line only (no text/badge)
    line: { label: "Break-even", showValue: true },
  }}
/>;

threshold={{
  series: vwap,
  line: {
    label: "VWAP",
    showValue: true,
    labelPosition: "left",
    labelAnchor: "first",
  },
}}

​

Custom threshold badge

import { TextInput, View, Text } from "react-native";
import Animated, { useAnimatedProps } from "react-native-reanimated";
import {
  LiveChart,
  type ThresholdBadgeRenderProps,
} from "react-native-livechart";

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);

function AverageCostBadge({ valueStr }: ThresholdBadgeRenderProps) {
  const animatedProps = useAnimatedProps(() => {
    const text = valueStr.get();
    return { text, defaultValue: text };
  });

  return (
    <View style={{ flexDirection: "row", backgroundColor: "#0f172a" }}>
      <Text>B/E</Text>
      <AnimatedTextInput editable={false} animatedProps={animatedProps} />
    </View>
  );
}

<LiveChart
  data={data}
  value={value}
  threshold={{
    value: breakEven,
    line: { label: "Break-even", showValue: true },
  }}
  renderThresholdBadge={(ctx) => <AverageCostBadge {...ctx} />}
/>

​

Time-varying threshold (a series)

import { LiveChart, type LiveChartPoint } from "react-native-livechart";

// A stepped average-cost (two points per step → a clean vertical riser).
const breakEven: LiveChartPoint[] = [
  { time: t0, value: 96.5 },
  { time: t1, value: 96.5 },
  { time: t1, value: 99.0 }, // ← step up
  { time: t2, value: 99.0 },
  { time: t2, value: 101.2 },
  { time: t3, value: 101.2 },
];

<LiveChart data={data} value={value} threshold={{ value: breakEven, fill: true }} />;

• The series is clamped to its first/last value outside its own time range. So a threshold whose last point sits behind the live edge extends as a flat line to “now” — carrying the last known break-even forward — and a window that starts before the first point holds the first value.
• Points are connected with straight segments. For a step function, emit two points at each boundary (same time, old then new value) as above; for a smooth benchmark, emit it as you’d sample it.
• The split renders from 64 samples across the plot (a GPU shader), so a hard step becomes a riser about 1/63 of the plot wide — visually a clean vertical at phone sizes. The stroke split, band and marker share the same samples, so they always agree at the riser.
• aboveColor / belowColor accept hex (#rgb/#rrggbb), rgb() and rgba() in series mode (an rgba() alpha carries into the stroke and scales the band). Named CSS colors and 8-digit hex are only supported by the constant form — in series mode they fall back to grey.
• The marker line’s badge shows the threshold’s live-edge value by default. Set labelAnchor: "first" to show and align to the value at the visible window’s left edge instead; labelPosition still controls the badge’s X side.
• An empty series ([]) renders as “no threshold yet”: plain line color, no band, no marker — handy while the threshold history is still loading.
• extendToNow: false opts out of the flat extension for a benchmark that must not project into the future (a closed session’s VWAP): right of the last point the stroke keeps its plain line color and the band / marker / badge end.

const vwap = useSharedValue<LiveChartPoint[]>([]);
// on each tick: vwap.set([...vwap.get(), { time, value }])

<LiveChart data={data} value={value} threshold={{ series: vwap, fill: true }} />;