Loading, pause & empty

Loading

<LiveChart data={[]} value={0} loading />

Shows a breathing placeholder. When data arrives and loading flips to false, the placeholder morphs into the real chart.

Typical pattern:

const [loading, setLoading] = useState(true);
const [data, setData] = useState<LiveChartPoint[]>([]);

useEffect(() => {
  connect().then((initial) => {
    setData(initial);
    setLoading(false);
  });
}, []);

<LiveChart data={data} value={data.at(-1)?.value ?? 0} loading={loading} />

Empty

If data is empty and loading is false, the empty state renders:

<LiveChart data={[]} value={0} emptyText="Waiting for market open" />

Default copy: "No data to display".

Paused

<LiveChart data={data} value={value} paused={isPaused} />

Freezes the scrolling view. Your feed can keep appending; resume behavior depends on how long you were paused (Animation):

• In-window resume — soft fade
• Beyond-window resume — morph back from placeholder

Offscreen

pauseWhenOffscreen (default true) stops the animation loop while the chart is not visible. Independent of the paused prop.