Plan chart

Free · MITReact Native · Expo

A plan reveal: a curve draws itself from today to the goal, then a goal flag pops with a success cue. It shows a labeled shape, not measured data.

View as Markdown

Look

Try it on your phone

Scan to open this demo in your phone's browser and use it with your fingers.

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/plan-chart.json

Then run npx expo install --fix so react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/plan-chart.

Usage

import { PlanChart } from "@/components/goodui-native/plan-chart/plan-chart";

<PlanChart from="82 kg" to="75 kg" start="Today" when="June 12" direction="down" />

When to use

Use it for

The end of an onboarding quiz, showing the projected path to a goal.
Savings, learning or fitness plans with a start and a target.

Reach for something else

Real measured data with axes: use a chart library or sparkline.
Promises you cannot back up: a projected weight or income curve can be read as a guarantee.

API reference

Prop	Type	Default
from* Value at the start of the plan, shown at the start of the line.	string	—
to* Goal, shown in the flag at the end.	string	—
when* When the goal lands, on the end of the axis.	string	—
start* Start of the axis.	string	—
points Curve shape from 0 (start) to 1 (goal). Defaults to an eased curve.	number[]	CURVE
height	number	220
direction Falling goal (weight) or rising (savings).	"down" \| "up"	"down"
labels	Partial<PlanChartLabels>	—
style Style for the outer container.	StyleProp<ViewStyle>	—
testID Identifier for end-to-end tests.	string	—

Motion and haptics

The line draws in about 1.3 seconds, the area fades in behind it, and the flag springs in at the end.
Reduced motion: everything is shown at once.

Haptic: The success cue as the flag lands, skipped under reduced motion.

One SVG with two animated paths on the UI thread.

Read as one image with a summary of the start, goal and date.

Notes for AI

All four text props are display strings: format numbers and dates first.
`points` is a shape from 0 to 1 with at least two values. It is not plotted against a scale.
Pass a new `key` to play it again.
Under RTL the curve runs right to left.

Goal quiz

A one-question-a-page onboarding built from an array of steps: single and multi choice, picture grids, sliders, stat pages, a timed analysing page and custom pages, with a progress bar and back navigation.

Sparkline

A small line or area chart that draws itself in and morphs to new data; press and drag to scrub, and a dot rides the curve while the line beyond your finger dims and every point ticks.

Progress ring

A circular progress ring that fills on a spring, laps itself past 100 % with a gap that lifts the lap off the ring, and bounces once with a success haptic when it completes.