LiveChartNew

LiveChart runs on the UI thread. Samples go into a buffer that lives there, and one frame loop per chart scrolls the window, moves the line's end and eases the y-range. A new sample never re-renders React. Rendering a chart requires the optional react-native-skia peer (>=3.0.0).

Use it instead of passing a new data array to LineChart on every sample: that re-renders React per sample and morphs every point instead of scrolling.

The chart stays left-to-right in RTL layouts, since time runs left to right in every locale. Pair it with a text label, such as the latest value, when the values matter to screen reader users.

Import

import { LiveChart, useLiveChartData } from 'heroui-native-pro';

Anatomy

const data = useLiveChartData();

<LiveChart data={data}>
  <LiveChart.Grid />
  <LiveChart.YAxis />
  <LiveChart.ReferenceLine value={...} />
  <LiveChart.Line />
  <LiveChart.Dot />
  <LiveChart.Crosshair />
  <LiveChart.Indicator />
  <LiveChart.Tooltip />
</LiveChart>

• useLiveChartData: Creates the sample buffer. push appends a sample from the JS or the UI thread; reset replaces them all.
• LiveChart: Root. Takes the buffer and the visible time window. Owns the canvas and the frame loop. Set its height with className.
• LiveChart.Line: The series, with an optional draw-in.
• LiveChart.Grid: Horizontal lines at the y ticks.
• LiveChart.YAxis: Value labels. The plot starts right after the widest one.
• LiveChart.ReferenceLine: Horizontal line at a fixed value, such as a threshold.
• LiveChart.Dot: Pulsing dot at the line's end.
• LiveChart.Crosshair: Vertical line at the pressed sample.
• LiveChart.Indicator: Ringed dot on the pressed sample.
• LiveChart.Tooltip: Value and time of the pressed sample.

Usage

Streaming samples

Push { time, value } samples, with time in milliseconds. Samples can arrive at any rate, evenly or not.

const data = useLiveChartData({ capacity: 600 });

useEffect(() => {
  const id = setInterval(() => {
    data.push({ time: Date.now(), value: readSensor() });
  }, 250);
  return () => clearInterval(id);
}, [data]);

<LiveChart data={data} window={30_000} className="h-56">
  <LiveChart.Grid />
  <LiveChart.YAxis />
  <LiveChart.Line />
  <LiveChart.Dot />
</LiveChart>;

capacity (default 1000) is the most samples kept. Keep it above the number one window holds.

Smooth arrival

The right edge runs a little behind real time (delay, 'auto' by default: a bit more than the measured interval between samples), so the line's end moves between two known samples instead of jumping when one arrives. Pass a number of milliseconds to fix it, or 0 for no delay.

<LiveChart data={data} delay={500}>
  ...
</LiveChart>

Y-axis range

Without yDomain, the range fits the visible samples: it grows at once, so a sample is never clipped, and shrinks smoothly. Fix either end with yDomain.

<LiveChart data={data} yDomain={{ min: 40, max: 200 }}>
  ...
</LiveChart>

Values outside the chart

data.latest is a shared value holding the newest sample's value. Show it with an animated text, or derive statistics from data.points with useDerivedValue: both stay on the UI thread.

const average = useDerivedValue(() => {
  const points = data.points.get();
  let sum = 0;
  for (const point of points) sum += point.value;
  return points.length ? sum / points.length : NaN;
});

To react on the JS thread only when something meaningful changes (such as a zone), compare in useAnimatedReaction and call scheduleOnRN when it does.

Pausing

isActive={false} stops the frame loop (for example when the chart scrolls off screen); the chart keeps its last frame. Samples pushed meanwhile are kept, and the line catches up when it resumes.

<LiveChart data={data} isActive={isFocused}>
  ...
</LiveChart>

Inspecting samples

Press and drag on the chart to inspect a sample; Crosshair, Indicator and Tooltip show it. The finger's x maps to a time in the window and then to the nearest sample, all on the UI thread, so inspecting never re-renders React.

The chart stays live while pressed: a still finger keeps its x and samples scroll through it, so the tooltip follows whichever one is under the finger. To hold the pressed sample instead, pass freeze. The window then stops while the finger is down (new samples keep arriving) and glides back to live on release.

<LiveChart data={data} selection={{ freeze: true }}>
  <LiveChart.Line />
  <LiveChart.Crosshair />
  <LiveChart.Indicator />
  <LiveChart.Tooltip
    format={(value) => {
      'worklet';
      return `${Math.round(value)} bpm`;
    }}
  />
</LiveChart>

activateAfter sets the press delay (100 ms by default) so a quick swipe still scrolls a parent list; selection={false} turns inspection off. Tooltip text runs on the UI thread, natively with react-native-animateable-text when it is installed, otherwise through an animated TextInput; format and formatTime must be worklets. Install react-native-animateable-text for the best tooltip performance (see Tooltip text on the UI thread).

Draw-in

animateIn on LiveChart.Line draws the line from left to right on mount; change resetKey to replay it.

<LiveChart.Line animateIn={1200} resetKey={replay} />

Example

import { Card } from 'heroui-native';
import { LiveChart, useLiveChartData } from 'heroui-native-pro';
import { useEffect } from 'react';

export default function HeartRate() {
  const data = useLiveChartData({ capacity: 200 });

  useEffect(() => {
    let bpm = 120;
    const id = setInterval(() => {
      bpm += (Math.random() - 0.5) * 6;
      data.push({ time: Date.now(), value: bpm });
    }, 450);
    return () => clearInterval(id);
  }, [data]);

  return (
    <Card>
      <Card.Body>
        <LiveChart
          data={data}
          window={30_000}
          yDomain={{ min: 100, max: 180 }}
          className="h-[240px]"
        >
          <LiveChart.Grid dashed={[3, 5]} />
          <LiveChart.YAxis count={5} />
          <LiveChart.ReferenceLine value={150} />
          <LiveChart.Line colorClassName="accent-danger" />
          <LiveChart.Dot colorClassName="accent-danger" />
        </LiveChart>
      </Card.Body>
    </Card>
  );
}

API Reference

LiveChart

LiveChart.Line

LiveChart.Grid

LiveChart.YAxis

LiveChart.ReferenceLine

LiveChart.Dot

LiveChart.Crosshair

LiveChart.Indicator

LiveChart.Tooltip

useLiveChartData

Returns LiveChartData:

LiveChartPoint is { time: number; value: number }, with time in milliseconds.