# Rota lanes

> Who is on call, and for how long. Sample data: on-call from Fri 16 to Thu 29, your shifts against Leo's and Ana's, key rotation Sat 06:00.

- Type 123 · Schedule and status
- Component: `<RotaLanes>`, the same name as the Figma component
- Install: `npx shadcn add @chartory/rota-lanes` (Code and Complete plans)
- Type page: https://usechartory.com/charts/rota-lanes

## Installation

1. **Set up the registry once.** Your token in .env and @chartory in components.json. Skip this when another chart is already installed. [Installation guide](https://usechartory.com/docs/installation)

2. **Add the chart.** One command adds the Rota lanes component to your project.

```bash
npx shadcn add @chartory/rota-lanes
```

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

usage.tsx:

```tsx
import { RotaLanes }
  from "@/components/chartory/rota-lanes"

<RotaLanes
  data={onCall}
  size="m"
  legend
/>
```

## Props

### `<RotaLanes>`

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

| Prop | Type | Default | Note |
| --- | --- | --- | --- |
| data | RotaLanesData | 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). |

### RotaLanesData

The data prop: one object for the whole chart.

| Prop | Type | Default | Note |
| --- | --- | --- | --- |
| days | number | Required | The number of days. |
| dl | string[] | Required | The day labels. |
| segs | RotaLanesShift[] | Required | The segments. |
| now | number | Required | Where now is on the axis. |
| weekend | [number, number][] | Required | The weekend ranges: [start, end]. |
| marker | RotaLanesMarker | Required | A marked hour and its label. |

### RotaLanesShift

One object per entry in segs.

| Prop | Type | Default | Note |
| --- | --- | --- | --- |
| who | string | Required | Who is on the shift. |
| hours | string | Required | The hours as shown. |
| from | number | Required | Where it starts. |
| to | number | Required | Where it ends. |
| you? | boolean | false | Marks your own shift. |

### RotaLanesMarker

The marker object.

| Prop | Type | Default | Note |
| --- | --- | --- | --- |
| h | number | Required | The hour of the marker. |
| text | string | Required | The label as shown. |

## Rota lanes: a React and Figma chart in four sizes

### What does a rota lanes show?

Rota lanes draw on-call shifts as blocks along a two-week line, your shifts in one colour and others in another, with planned events marked. Long stretches and weekends show at once. Use it for on-call rotas and support shifts.

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 Rota lanes component?

It is one **<RotaLanes>** component. Its props are the Figma properties with the same names and values, and the props table above lists them. The data is shifts with a person, a start and an end.

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 person's view?** Yes means the rota lanes fit.
- **Is it shifts over days?** Yes means the rota lanes fit.
- **Is it people, not alerts?** Yes means the rota lanes fit.

### When does another type fit better?

- **Many resources' jobs.** Use Gantt instead.
- **One day's activities.** Use Tachograph instead.
- **Where alerts went.** Use Replay lanes instead.

## Rota lanes questions

### Does the Rota lanes 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?

Add your token and the @chartory registry once, then run npx shadcn add @chartory/rota-lanes. The Installation guide has the steps.

### Can my coding agent install it?

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

### What data does it expect?

Shifts with a person, a start and an end. 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/123-rota-lanes 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?

Code and Complete. Figma has the Figma file only.