# Plan chart

> 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.

- Type: Component (data)
- Access: Free, open source (MIT)
- Page: https://goodui.dev/native/components/plan-chart
- Markdown: https://goodui.dev/native/components/plan-chart.md
- Registry item: https://goodui.dev/native/r/plan-chart.json
- Dependencies: react-native-reanimated, react-native-svg
- Keywords: react native goal chart, plan reveal, weight loss curve, onboarding chart, animated line chart

## When to use

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

## When not to use

- 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.

## Installation

With the shadcn CLI (needs a components.json in the Expo app), then `npx expo install --fix` so native dependencies match your Expo SDK. The foundation comes along the first time.

```bash
npx shadcn@latest add https://goodui.dev/native/r/plan-chart.json
npx expo install --fix
```

The component lands in `components/goodui-native/plan-chart/` and imports the foundation from `components/goodui-native/foundation/` with relative paths; it also installs locale.

Built-in strings follow `<GooduiLocaleProvider>` (one [language pack](https://goodui.dev/native/r/locale-tr.json) translates the whole kit); the `labels` prop overrides them for one instance.

## Usage

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

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

## API reference

### PlanChart

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

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

## Accessibility

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

## Motion

- 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.

## Haptics

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

## Performance

- One SVG with two animated paths on the UI thread.

## 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.

## Related

- [Goal quiz](https://goodui.dev/native/components/goal-quiz.md): 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](https://goodui.dev/native/components/sparkline.md): 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](https://goodui.dev/native/components/progress-ring.md): 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.

## Guidance for AI tools

Plan chart: 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. Use only the documented props. Keep accessibility, reduced motion and both color schemes intact when adapting it.

Full library index: https://goodui.dev/native/llms.txt