# Shipment journey

> One shipment, stage by stage. Sample data: one shipment, picked up Oct 1, delivered Oct 14 (ETA), by warehouse, sea, customs and road.

- Type 096 · Flow between steps
- Component: `<ShipmentJourney>`, the same name as the Figma component
- Install: `npx shadcn add @chartory/shipment-journey` (free in Hearth: the public registry, no token; Signal with Code and Complete)
- Type page: https://usechartory.com/charts/shipment-journey

## Installation

1. **Set up the registry once.** This chart is free in Hearth and MIT licensed: no token. Add @chartory to components.json once (the URL alone, no headers), or skip this when another chart is already installed. [Installation guide](https://usechartory.com/docs/installation)

2. **Add the chart.** One command adds the Shipment journey component to your project.

```bash
npx shadcn add @chartory/shipment-journey
```

3. **Use it.** Pass your rows. The props are the Figma properties.

usage.tsx:

```tsx
import { ShipmentJourney }
  from "@/components/chartory/shipment-journey"

<ShipmentJourney
  data={shipmentStages}
  size="m"
  legend
/>
```

## Props

### `<ShipmentJourney>`

Every prop but data is a Figma property with the same name and values.

| Prop | Type | Default | Note |
| --- | --- | --- | --- |
| data | ShipmentJourneyData | Required | The chart's data. The tables below list every field. |
| size | "xs" \| "s" \| "m" \| "l" | "m" | The size class. Each one is laid out again from the data. |
| legend | boolean | true | Shows the legend row under the plot. |
| color | "cat-1" \| "cat-2" \| "cat-3" \| "cat-4" | "cat-1" | The data colour of the primary marks (data/primary). |

### ShipmentJourneyData

The data prop: one object for the whole chart.

| Prop | Type | Default | Note |
| --- | --- | --- | --- |
| t0 | number | Required | The start time. |
| t1 | number | Required | The end time. |
| now | number | Required | Where now is on the axis. |
| phases | [number, number, string][] | Required | The phases: [start, end, colour token]. |
| events | ShipmentJourneyEvent[] | Required | One entry per event. |
| xl | [number, string][] | Required | The x axis labels: [position, label] pairs. |

### ShipmentJourneyEvent

One object per entry in events.

| Prop | Type | Default | Note |
| --- | --- | --- | --- |
| t | number | Required | Where the event sits on the time axis. |
| label | string | Required | The name shown on the chart. |
| date | string | Required | The date as shown. |
| up | boolean | Required | Draws the event's stem above the line. |

## Shipment journey: a React and Figma chart in four sizes

### What does a shipment journey show?

A shipment journey draws one shipment's stages along a timeline, with dates done and dates expected, and the mode of each leg. Use it for order tracking, freight and any item moving through set stages.

Chartory ships it as a Figma component and a React component with the same name. The code installs from the shadcn registry with one command and lands in your project as a file you own.

### What is the Shipment journey component?

It is one **<ShipmentJourney>** component. Its props are the Figma properties with the same names and values, and the props table above lists them. The data is stages with a date and a mode.

Sizes **XS**, **S**, **M** and **L** re-lay the chart out from the data instead of scaling it, so labels stay readable at every size.

### When should I use it?

- **Is it one shipment?** Yes means the shipment journey fits.
- **Are there stages?** Yes means the shipment journey fits.
- **Are dates part of it?** Yes means the shipment journey fits.

### When does another type fit better?

- **Many vehicles against plan.** Use Marey schedule instead.
- **Stops on one route.** Use Route line instead.
- **Milestones by day number.** Use Milestone track instead.

## Shipment journey questions

### Does the Shipment journey chart work with shadcn/ui?

Yes. It installs through the shadcn registry with the shadcn CLI, and the file lands in your project.

### How do I install it?

It is free in Hearth and MIT licensed: add the @chartory registry URL once, no token, then run npx shadcn add @chartory/shipment-journey. The Installation guide has the steps.

### Can my coding agent install it?

Yes. Connect the Chartory MCP server and ask for the shipment journey chart; the agent runs the same command and you review the diff.

### What data does it expect?

Stages with a date and a mode. The sample data comes with the component, and the props table lists every field.

### Which sizes does it ship in?

XS, S, M and L, in Figma and in code. Each size is laid out again from the data, so text and lines keep their size.

### Is it in the Figma file too?

Yes. chart/096-journey-shipment has the same properties as the component.

### Does it follow light and dark mode?

Yes. Every paint is a token, so the chart follows light and dark mode and the collection you pick.

### Which plan has the code?

None for Hearth: it is free in the public registry, no token. The Signal collection (@chartory/signal) comes with Code and Complete.