# Size class

> A chart word, with the charts that use it.

**Definition.** A size class is one of four fixed chart sizes, XS to L, each laid out on its own. A chart is redrawn from its data at each size instead of being scaled.

Updated Nov 2, 2026

## 001 · Bars · XS, S, M and L

- **01 Redrawn, not scaled.** Text and lines keep their size at every class.
- **02 What changes.** Labels thin out and the legend moves as the card gets smaller.

## Where you see it

- [001 · Bars](https://usechartory.com/charts/bars): Compare items · Fintech data
- [010 · Line](https://usechartory.com/charts/line): Change over time · AI data
- [042 · Waterfall](https://usechartory.com/charts/waterfall): Flow between steps · Fintech data

## Common mistakes

- **Scaling a chart to fit a card** Text shrinks below readable. Pick the size class that fits.
- **Mixing size classes in one row** Cards in a row read best at one size.

## Questions

### How do I pick a size?

By the card's width: L from 800 px, M from 480, S from 360, XS from 311.

### Is size a prop?

Yes: size="xs", "s", "m" or "l", the same as the Figma variant.

## Related terms

- [Legend](https://usechartory.com/glossary/legend): The key that names each colour or mark.
- [Tick](https://usechartory.com/glossary/tick): A small mark on an axis at a round value, with its label.
- [Axis](https://usechartory.com/glossary/axis): The scale along the edge of a plot that gives marks their value.

## Every type, in four size classes.

In Figma and React, in four sizes, light and dark. Pay once, every update. [See plans](https://usechartory.com/pricing)

Every chart word, A to Z. [Open the glossary](https://usechartory.com/glossary)