# Off The Charts
URL: https://remocn.dev/docs/numbers/off-the-charts

Quarterly bars climb until the last one breaks its axis and overshoots the target at 260%

- Install: `npx shadcn@latest add @remocn/off-the-charts`
- Vibe: data
- Natural length: 107f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/off-the-charts
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { OffTheCharts } from "@/components/remocn/off-the-charts";

const OffTheChartsScene = () => (
  <OffTheCharts
    target={100}
    caption="of the Q4 target"
    data={[
      { label: "Q1", value: 58 },
      { label: "Q2", value: 74 },
      { label: "Q3", value: 86 },
      { label: "Q4", value: 260 },
    ]}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="OffTheCharts"
    component={OffTheChartsScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Quarterly bars climb against a dashed target line inside a framed axis; the last bar presses against the ceiling, snaps through it, and the overshoot value slams in with its caption. Pass `data`, `target`, and `max` (the axis ceiling), with `unit`, `value` and `caption` for the text. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `data` | `OffTheChartsDatum[]` | `DEFAULT_DATA` | Bars to plot, in order, with a label and value each. |
| `accentIndex` | `number` | — | Index of the bar that breaks out; defaults to the last. |
| `target` | `number` | `100` | Value where the dashed target line sits. |
| `max` | `number` | `150` | Value at the top of the framed axis. |
| `unit` | `string` | `"%"` | Unit appended to values. |
| `targetLabel` | `string` | `"Target"` | Label on the target line. |
| `value` | `string` | — | Hero text; defaults to the accent bar value plus unit. |
| `caption` | `string` | `"of the Q4 target"` | Line under the hero value. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the hero element. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette. |

## Use when
- A quarterly results beat where the last bar blows past a target line, such as 260% of plan.
- A goal-versus-actual moment where overshooting the chart is the whole message.
- A bold overachievement stat that should break the frame instead of fitting inside it.

## Don't use when
- Everything fits comfortably on one axis — use `spring-bars`.
- The huge value needs a log rescale to read the smaller bars — use `log-rescale`.
- You want a stepped total of gains and losses — use `waterfall-chart`.