Skip to main content
Before data arrives — or when a feed runs dry — the chart shows a placeholder instead of a blank plot. These props control those states and the text the chart renders.
Live example: app/demo/states-and-formatting.tsx in the example app.

Loading and empty placeholders, plus custom value/time formatters

​
Loading

While you wait for data, pass loading to render a breathing-line placeholder.
If an already-live dataset is cleared for a replacement request, the chart switches to its loading or empty shell immediately — it never visibly morphs the now-stale line flat over the placeholder. When replacement data arrives, the usual grow-in runs; tune that direction with transitions.reveal. The Replace data control in the example app shows the full handoff with a deliberately slow grow-in.

​
Styling the loading shell

loading also takes a LoadingConfig object to restyle the shell — the squiggle and the skeleton Y-axis placeholders. Every field is optional:
Pass true for the defaults, the object to restyle, and false (or omit) for “not loading” — so loading={!ready && cfg} toggles the styled shell as data arrives. Set axisLabels: false to drop the skeleton Y-axis placeholders and show only the breathing squiggle. color, amplitude, and speed also flow into the brief reveal morph, so the squiggle keeps its look as it melts into the line. The same config works on LiveChartSeries. The loading→live reveal duration itself is controlled by the transitions.reveal prop.

​
Empty state

When there are no samples and loading is false, the chart shows an empty shell with a label. A single line point or committed candle is valid data and renders normally. Customize the empty label with emptyText.

​
Formatting values & time

formatValue and formatTime control the text on axes, the badge, and tooltips. They run on the UI thread, so they must be worklet-safe — mark them with the "worklet" directive and keep them pure (no JS-thread closures).
The library also exports worklet-safe formatValue / formatTime helpers (adaptive K / M suffixes and HH:MM:SS) you can pass directly or call from your own formatters.