# Pulse chart

Pulse draws one stroke per day, as tall as the day was busy, growing out from a centre line. The quiet stretch is bracketed and named, so a holiday reads at a glance.

> Live preview: see the chart playing at https://bettertyped.github.io/react-wrapped/docs/charts/ticks/
>
> Every day a stroke, the quiet 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: ["Pulse."],
    lede: "Every day a stroke, the quiet stretch lit.",
    chart: {
      type: "ticks",
      values: [
        1, 8, 6, 4, 2, 9, 7, 5, 3, 1, 8, 6,
        // ...and 108 more
      ],
      gap: { from: 53, to: 64, label: "12 days off" },
    },
  },
  { key: "ticks", label: "Pulse" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `type` | `"ticks"` | Picks this chart. |
| `values` | `readonly number[]` | One value per day, oldest first. |
| `gap` | `{ from: number; to: number; label: string }` | The quiet stretch, as two indexes into `values`, and its name. |

## 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/)
- [Funnel chart](https://bettertyped.github.io/react-wrapped/docs/charts/funnel/)
- [Rings chart](https://bettertyped.github.io/react-wrapped/docs/charts/rings/)
- [Wheel chart](https://bettertyped.github.io/react-wrapped/docs/charts/wheel/)
- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/)

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