Description
Data visualisation is the graphical representation of data that helps users to interpret complex information, identify patterns, and answer specific questions. It translates datasets into accessible formats such as charts which enable users to compare values, understand trends, and make informed decisions. In product interfaces, data visualisation is typically presented in tiles or panels that can be arranged within a structured layout. Multiple tiles can be combined to create dashboards that present key insights and metrics in a single, scannable view.
Anatomy
Anatomy
Tile states
Populated (default)
Skeleton loader
Error
Empty state
Variations
Data summary
The summary area sits above the chart and provides high-level context for the data being displayed. It aids fast comprehension and should complement the chart, not replace it.
Summary with trend
Summary only
Footer
The footer area can provide supporting actions or information related to the chart.
With AI button
With link
With AI button and link
Layout
When multiple data visualisation tiles are displayed side by side, use CSS Flexbox (or Flex Wrap in Figma) to allow tiles to adapt responsively across smaller viewports. Spacing between tiles and page margins should follow the rules defined in the Spatial Markup guidelines.
Layout at 1600px
Layout at 960px & 460px
Examples
These examples reflect current best practices, illustrating clean, modern, and accessible approaches that promote consistency and align with Sage’s brand and experience principles.
Sage Home
Copilot canvas