# Sizes

> Every type ships in four sizes: XS, S, M and L. Each size redraws the chart from its data, so labels, legends and marks fit the card. Nothing is scaled.

| Size | Width × height | Plot width |
| --- | --- | --- |
| XS | 311 × 212 | 279 |
| S | 360 × 212 | 328 |
| M | 480 × 246 | 440 |
| L | 800 × 330 | 760 |

## Pick by card width

| Card has room for | Use |
| --- | --- |
| 800 px or more | L |
| 480 to 799 px | M |
| 360 to 479 px | S |
| 311 to 359 px | XS |

## What changes when it gets smaller

- **Abbreviate** long labels first.
- **Thin out** axis labels, then hide the ones that do not fit. Text never shrinks.
- **Stack** side lists: name over value, before anything is truncated.
- **Stagger** labels that would collide. Data never goes missing.

## Pick a size

usage.tsx:

```tsx
<Waterfall size="xs" />
<Waterfall size="l" legend />
```

**Note: Same in Figma.** The size variant in Figma and the size prop in code take the same four values.

## Legend

Legend on adds a row under the plot. When it wraps, the extra row comes from the plot, so the chart keeps its height. **31 types** label their marks and have no legend.

## In Figma

Variants are named **size=M, legend=on**; the same values as the props.

- [Props](https://usechartory.com/docs/props): size, legend and data.
- [All 100+ types](https://usechartory.com/docs/charts): Every type ships every size.