Charts overview
Data displays that prioritize comparison, meaning and accessible alternatives.
Design thinking
Charts earn their space by making a comparison easier than a table would. The visualization's geometry follows the data, while its labels, controls and surrounding surfaces remain part of the same design system.
Size and spacing
Data-driven geometry; action-sized toolbars. Give the chart a real responsive container and a deliberate aspect or height constraint. Use shared chart frames, legends and tooltips. Chart colors are independent of the control accent; toolbars follow the action and spacing standards.
Interaction and motion
Keep static charts stable rather than animating every mount. If interaction reveals values, expose the same information to keyboard users and through a summary or data alternative. Respect reduced motion for supported transitions.
Best practices
- Choose a chart for the question: trend, distribution, composition or comparison. State units and the time range explicitly.
- Use the shared chart palette and stable series identities. Do not encode meaning using color alone.
- Keep aggregation, formatting and domain rules in the application. Test empty, single-point and extreme-value data.
- Verify labels and tooltips at narrow widths. Provide an accessible summary or data table instead of relying on pointer hover.