# Days chart

Days shows a handful of dates side by side, each a cell lit by how busy it was, with the marked ones ringed. Use it when the story is about specific days.

> Live preview: see the chart playing at https://bettertyped.github.io/react-wrapped/docs/charts/days/
>
> A short run of dates, the ones that matter ringed.

## 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: ["Days."],
    lede: "A short run of dates, the ones that matter ringed.",
    chart: {
      type: "days",
      days: [
        { label: "23", sub: "Dec", level: 2, count: 2 },
        { label: "24", sub: "Eve", level: 4, count: 9, marked: true },
        { label: "25", sub: "Xmas", level: 4, count: 16, marked: true },
        { label: "26", sub: "Dec", level: 0, count: 0 },
        { label: "30", sub: "Dec", level: 1, count: 1 },
        { label: "31", sub: "NYE", level: 1, count: 1, marked: true },
        { label: "1", sub: "New Year", level: 3, count: 8, marked: true },
      ],
    },
  },
  { key: "days", label: "Days" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `type` | `"days"` | Picks this chart. |
| `days` | `readonly { label: string; sub: string; level: number; count: number; marked?: boolean }[]` | One cell per day. `level` is 0 to 4 like a calendar cell, `sub` is the small line under the date. |

## 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/)
- [Donut chart](https://bettertyped.github.io/react-wrapped/docs/charts/donut/)
- [Dial chart](https://bettertyped.github.io/react-wrapped/docs/charts/gauge/)
- [Dot share chart](https://bettertyped.github.io/react-wrapped/docs/charts/dots/)
- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/)

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