# Charts

react-wrapped ships twenty-one charts, each a picture of its own numbers. A scene hands a chart type its data and never draws its own, so every chart in a video shares one look: a glow behind what matters, a hairline through the point, and the number in a pill.

- [Spark](https://bettertyped.github.io/react-wrapped/docs/charts/spark/): A line over time, one stretch lit.
- [Bars](https://bettertyped.github.io/react-wrapped/docs/charts/bars/): Columns sharing one light, the ones that matter lit.
- [Funnel](https://bettertyped.github.io/react-wrapped/docs/charts/funnel/): A flow narrowing, stage by stage.
- [Pulse](https://bettertyped.github.io/react-wrapped/docs/charts/ticks/): Every day a stroke, the quiet stretch lit.
- [Rings](https://bettertyped.github.io/react-wrapped/docs/charts/rings/): Parts of a whole, biggest outside.
- [Donut](https://bettertyped.github.io/react-wrapped/docs/charts/donut/): One part against the rest.
- [Days](https://bettertyped.github.io/react-wrapped/docs/charts/days/): A short run of dates, the ones that matter ringed.
- [Dial](https://bettertyped.github.io/react-wrapped/docs/charts/gauge/): A share, as lit segments.
- [Meter](https://bettertyped.github.io/react-wrapped/docs/charts/meter/): One pill per thing counted, lit where there was something.
- [Pixel area](https://bettertyped.github.io/react-wrapped/docs/charts/pixels/): A total climbing, in graph cells.
- [Wheel](https://bettertyped.github.io/react-wrapped/docs/charts/wheel/): A year around a ring, month by month.
- [Day clock](https://bettertyped.github.io/react-wrapped/docs/charts/clock/): A day, hour by hour. The lit hour is the busiest.
- [River](https://bettertyped.github.io/react-wrapped/docs/charts/river/): Parts of a whole, month by month. One of them arrived halfway.
- [Dot share](https://bettertyped.github.io/react-wrapped/docs/charts/dots/): A share as a hundred dots, the lit ones the part that counts.
- [Then and now](https://bettertyped.github.io/react-wrapped/docs/charts/dumbbell/): The ring is where last year ended, the dot is where this one did.
- [Bubbles](https://bettertyped.github.io/react-wrapped/docs/charts/bubbles/): Parts of a whole as discs, sized by their share.
- [Month up close](https://bettertyped.github.io/react-wrapped/docs/charts/month/): One month, every day of it. The lit day is the biggest.
- [Radar](https://bettertyped.github.io/react-wrapped/docs/charts/radar/): A year as one outline, against everyone else's.
- [Where you stand](https://bettertyped.github.io/react-wrapped/docs/charts/standing/): Everyone, fewest to most. The lit bar is where you are.
- [Mirror](https://bettertyped.github.io/react-wrapped/docs/charts/mirror/): What was added above the line, what was removed below it.
- [Week by hour](https://bettertyped.github.io/react-wrapped/docs/charts/hours/): A week, hour by hour. The lit cell is the busiest slot.

## How charts animate

- **Structure first.** Empty slots, grids and axis names stand before any number arrives.
- **Numbers arrive with a direction.** A level rising, a wave, a hand going round.
- **The point lands last and alone**, then its pill grows out of it on a hairline.
- **Nothing grows past its own size.** Cells in a grid never overlap their neighbours on the way in.
- **Everything seeks.** A chart animates on the scene's timeline, so scrubbing and exporting frame by frame both work.

## Colours

A chart reads the palette of the stage it is on. The lit part takes `--wr-rarity`, the quiet part the palette's five levels, text takes `--wr-fg`. Change the palette and every chart follows; see [theming](https://bettertyped.github.io/react-wrapped/docs/theming/).

## Related

- [Chart scene](https://bettertyped.github.io/react-wrapped/docs/scenes/chart/)
- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/)
- [Insight cards](https://bettertyped.github.io/react-wrapped/docs/graphics/insight-cards/)
- [Introduction](https://bettertyped.github.io/react-wrapped/docs/)
- [Designs](https://bettertyped.github.io/react-wrapped/designs/)

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