# Spark chart

Spark draws a year as one glowing line. Use it for anything that rises and falls over time, and light the stretch that matters: a streak, a launch week, the day a total crossed ten thousand.

> Live preview: see the chart playing at https://bettertyped.github.io/react-wrapped/docs/charts/spark/
>
> A line over time, one stretch lit.

## Installation

```bash
pnpm add @react-wrapped/charts @react-wrapped/core gsap
```

## Usage

A chart is data, not markup. Hand a scene an object with `type` set and the numbers to draw, and the scene draws it and plays its entrance on the video's timeline.

```tsx
import { chartScene } from "@react-wrapped/scenes";

export const scene = chartScene(
  {
    eyebrow: "Your year",
    title: ["Spark."],
    lede: "A line over time, one stretch lit.",
    chart: {
      type: "spark",
      values: [
        27, 30, 31, 21, 27, 37, 36, 44, 45, 29, 21, 4,
        // ...and 40 more
      ],
      band: { from: 20, to: 27, label: "41 days in a row" },
    },
  },
  { key: "spark", label: "Spark" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `type` | `"spark"` | Picks this chart. |
| `values` | `readonly number[]` | The values, oldest first. Weekly numbers read best: 52 points across the frame. |
| `band` | `{ from: number; to: number; label: string }` | The stretch to light, as two indexes into `values`, and the note in the pill above it. |
| `threshold` | `{ value: number; label: string }` | A dashed line to cross. A dot and a pill mark the first value that reaches it. |

## Spark, crossing a line

A running total and the moment it crossed a mark.

> Live preview: see the chart playing at https://bettertyped.github.io/react-wrapped/docs/charts/spark/

```tsx
const chart = {
  type: "spark",
  values: [
    243, 513, 792, 981, 1224, 1557, 1881, 2277, 2682, 2943, 3132, 3168,
    // ...and 40 more
  ],
  threshold: { value: 10000, label: "10,000" },
};
```

## How it comes in

Every chart plays in the order it is read: what it is made of stands first, the numbers arrive with a direction, and the one thing the chart is about lands last with its pill. Nothing is on screen before its own entrance. See [how charts animate](https://bettertyped.github.io/react-wrapped/docs/charts/) for the shared rules.

## Related

- [Charts](https://bettertyped.github.io/react-wrapped/docs/charts/)
- [Bars chart](https://bettertyped.github.io/react-wrapped/docs/charts/bars/)
- [Dial chart](https://bettertyped.github.io/react-wrapped/docs/charts/gauge/)
- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/)

Source: https://bettertyped.github.io/react-wrapped/docs/charts/spark/