Data visualizations pull insights from data sets into a narrative and allow users to explore data themselves to discover their own insights.


Data visualizations should be:

  • Cohesive
  • Structured
  • Readable
  • Understandable

When creating a data visualization, keep in mind:

  • In terms of cognition, visualizations where points are positioned along a common scale are most easily understood.
  • We are generally less adept at understanding lengths without a common base.
  • We are often worst at perceiving angles, directions and areas (which is why pie charts, for example, are generally not a great way to present data).


There are six main categories of data visualizations:

  • Hierarchical: shows portions of a whole (ex. treemaps, node, and sunburst diagrams).
  • Relational: shows the flow of assets (ex. network diagrams, matrices, and sankey diagrams).
  • Spatial: shows data that can be mapped (ex. location map)
  • Temporal: shows changes in data over time (ex. timeline)
  • Spatial-temporal: shows data that can be mapped over time (ex. heat map)
  • Statistical graphics: shows the composition of data (ex. column charts, area charts, and line charts)

We have use cases for Relational, Statistical, and Spatial-temporal. The other categories will be built when there is an appropriate use case.


The GitLab commit graph is an example of a relational data visualization, as it shows how all of the individual commits are related to the master.

Create component for the Commit Graph in GitLab UI Create an issue


A heat map is an example of a spatial-temporal data visualization.

Heat maps can be used to more quickly visualize and compare values in a dataset. In heat maps, data points are grouped and displayed using shades of color. Darker colors are generally used to communicate a higher density of data.

Loading story...

Statistical graphics

Charts are statistical graphics that help users quickly digest, visualize and see trends in their data.

Full list of chart types and design specifications is detailed on the Charts component page.

Stacked column chart
Loading story...

Design specifications

Color, spacing, dimension, and layout specific information pertaining to this component can be viewed using the following links:

Pajamas UI Kit →

Last updated at: