# Meter chart

Meter lines up one slim pill per thing counted and lights each by its value. Zero stays dark, which makes gaps as readable as peaks.

> Live preview: see the chart playing at https://bettertyped.github.io/react-wrapped/docs/charts/meter/
>
> One pill per thing counted, lit where there was something.

## 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: ["Meter."],
    lede: "One pill per thing counted, lit where there was something.",
    chart: {
      type: "meter",
      pills: [
        27, 30, 0, 0, 27, 37, 36, 44, 0, 0, 21, 4,
        // ...and 40 more
      ],
      from: "Oct 2025",
      to: "Oct 2026",
      note: "38 of 52 Fridays",
    },
  },
  { key: "meter", label: "Meter" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `type` | `"meter"` | Picks this chart. |
| `pills` | `readonly number[]` | One value per pill. Zero is dark, the biggest value is the brightest. |
| `from` | `string` | The label under the left end. |
| `to` | `string` | The label under the right end. |
| `note` | `string` | A note in a pill above the row. |

## 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/)
- [Dial chart](https://bettertyped.github.io/react-wrapped/docs/charts/gauge/)
- [Pixel area chart](https://bettertyped.github.io/react-wrapped/docs/charts/pixels/)
- [Bubbles chart](https://bettertyped.github.io/react-wrapped/docs/charts/bubbles/)
- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/)

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