# Where you stand chart

Where you stand draws everyone as a row of bars, fewest to most, and lights the one bar a person sits in. Use it for a percentile, such as more than 97 in every 100.

> Live preview: see the chart playing at https://bettertyped.github.io/react-wrapped/docs/charts/standing/
>
> Everyone, fewest to most. The lit bar is where you are.

## 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: ["Where you stand."],
    lede: "Everyone, fewest to most. The lit bar is where you are.",
    chart: {
      type: "standing",
      bars: [
        40, 57, 63, 86, 99, 116, 148, 167, 184, 211, 218, 217,
        // ...and 16 more
      ],
      at: 24,
      label: "you: top 6%",
      from: "fewer days",
      to: "more days",
    },
  },
  { key: "standing", label: "Where you stand" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `type` | `"standing"` | Picks this chart. |
| `bars` | `readonly number[]` | How many sit at each step, least to most. |
| `at` | `number` | The index of the lit bar. |
| `label` | `string` | The note above the lit bar. |
| `from` | `string` | The label under the left end. |
| `to` | `string` | The label under the right end. |

## 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/)
- [Radar chart](https://bettertyped.github.io/react-wrapped/docs/charts/radar/)
- [Mirror chart](https://bettertyped.github.io/react-wrapped/docs/charts/mirror/)
- [Rings chart](https://bettertyped.github.io/react-wrapped/docs/charts/rings/)
- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/)

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