# Slope Chart
URL: https://remocn.dev/docs/numbers/slope-chart

A slope chart draws before/after lines, the hero line rising to a 6.8x stat

- Install: `npx shadcn@latest add @remocn/slope-chart`
- Vibe: data
- Natural length: 124f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/slope-chart
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SlopeChart } from "@/components/remocn/slope-chart";

const SlopeChartScene = () => (
  <SlopeChart
    highlight={{ before: 6, after: 41 }}
    value="6.8×"
    label="more launch videos shipped"
  />
);

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

Grey lines draw between a before and an after axis, then the hero line starts low, climbs steeply with a dot and ring, and the multiplier stat and label land. Pass `lines` for the grey context, `highlight` for the hero line, and `value`, `label`, `beforeLabel` and `afterLabel`. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `SlopeLine[]` | `DEFAULT_LINES` | Grey context lines, each with a before and after value. |
| `highlight` | `SlopeLine` | `DEFAULT_HIGHLIGHT` | The hero line with before and after values. |
| `value` | `string` | `"6.8×"` | The hero stat that lands, such as 6.8x. |
| `label` | `string` | `"more launch videos shipped"` | Line under the hero stat. |
| `beforeLabel` | `string` | `"Before"` | Heading over the before axis. |
| `afterLabel` | `string` | `"After"` | Heading over the after axis. |
| `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 before-and-after beat across two time points where one line climbs far above the rest.
- A claim such as 6.8x more launch videos, shown against flat competitor lines.
- A comparison where most lines barely move and one rises sharply.

## Don't use when
- You want each row's before and after as dots on a track — use `dumbbell-shift`.
- You have more than two time points — use `stacked-shift`.
- You want the improvement as a single curve — use `growth-line`.