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.

​
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 fewer than two samples and loading is false, the chart shows an empty shell with a label. Customize the 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.