Charts less than 321px wide have compact font sizes and spacings, to accommodate small screens and tight layouts.
Small Chart container
Example
Source: Example Source
| Size | xxxl | xxl | xl | l | m | s | xs | xxs |
|---|---|---|---|---|---|---|---|---|
| Font size | 28 | 20 | 18 | 16 | 14 | 12 | ||
| Spacing | 24 | 16 | 12 | 8 | 6 | 4 | 2 |
Responsiveness
The dimensions of a chart affect its rendering — not only with respect to font sizes and spacing, but even chart type and interaction possibilities.
In addition, the presentation context can also affect the rendering style and use of surrounding elements, such as titles, legends, or source annotation.
Small charts
Medium-sized charts
Charts with width between 321px and 640px have a bit more variety in font and spacing sizes.
Medium Chart container
Example
Source: Example Source
| Size | xxxl | xxl | xl | l | m | s | xs | xxs |
|---|---|---|---|---|---|---|---|---|
| Font size | 38 | 22 | 20 | 18 | 16 | 14 | ||
| Spacing | 30 | 20 | 15 | 10 | 8 | 6 | 4 |
Large charts
Charts wider than 640px can use the full spectrum of font sizes and spacings.
Large Chart container
Example
Source: Example Source
| Size | xxxl | xxl | xl | l | m | s | xs | xxs |
|---|---|---|---|---|---|---|---|---|
| Font size | 54 | 22 | 20 | 18 | 16 | 14 | ||
| Spacing | 30 | 20 | 15 | 10 | 8 | 6 | 4 |
Presentation context
In addition, the presentation and usage context will affect the rendering style, as well as presence of e.g. source, title, attribution, legend and information elements.
