# Bars chart

Bars draws a row of columns under one shared glow. Mark the bars that make the point with `peak`, and they light up while the rest stay quiet.

> Live preview: see the chart playing at https://bettertyped.github.io/react-wrapped/docs/charts/bars/
>
> Columns sharing one light, the ones that matter 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: ["Bars."],
    lede: "Columns sharing one light, the ones that matter lit.",
    chart: {
      type: "bars",
      bars: [
        { label: "M", value: 62, peak: false },
        { label: "T", value: 88, peak: false },
        { label: "W", value: 54, peak: false },
        { label: "T", value: 96, peak: false },
        { label: "F", value: 71, peak: false },
        { label: "S", value: 22, peak: true },
        { label: "S", value: 30, peak: true },
      ],
    },
  },
  { key: "bars", label: "Bars" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `type` | `"bars"` | Picks this chart. |
| `bars` | `readonly { label?: string; value: number; peak?: boolean }[]` | One column each. `label` goes under the column, `peak` lights it. |
| `peakLabel` | `string` | A number or a note in a pill above the tallest lit column. |

## Bars, one towering

One day against the days around it.

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

```tsx
const chart = {
  type: "bars",
  bars: [
    { value: 3, peak: false },
    { value: 1, peak: false },
    { value: 2, peak: false },
    { value: 4, peak: false },
    { value: 2, peak: false },
    { value: 1, peak: false },
    { value: 3, peak: false },
    { value: 52, peak: true },
    { value: 2, peak: false },
    { value: 1, peak: false },
    { value: 4, peak: false },
    { value: 3, peak: false },
    { value: 1, peak: false },
    { value: 2, peak: false },
    { value: 2, peak: false },
  ],
  peakLabel: "52",
};
```

## 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/)
- [Spark chart](https://bettertyped.github.io/react-wrapped/docs/charts/spark/)
- [Funnel chart](https://bettertyped.github.io/react-wrapped/docs/charts/funnel/)
- [Meter chart](https://bettertyped.github.io/react-wrapped/docs/charts/meter/)
- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/)

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