Skip to main content

Color

ColorSCSSHEX
Graph title$text-02#5a6872
Axis labels$text-02#5a6872
Grid lines$text-02#5a6872
Data Increments$text-02#5a6872
Tooltip: text$text-02#5a6872

Typography

Note that all axis labels should be set in uppercase.

PropertyFont-size (px/rem)Font-weight
Graph title20 / 1.25Light / 300
Axis labels10 / 0.625Bold / 700
Data increment12 / 0.75Roman / 400
Key label16 /1Bold / 700
Key label14 /1Roman / 400

Structure

Typically graphs should have a height to width ratio of 1:1.5, respectively. This ensures that graphs are always wider than they are tall. Reference the chart below to see how much suggested screen real estate a graph should be covering at different screen sizes.

If using a a data visualization in a modal, only use tiles that take up 50% or more of the screen.

Size% of Browser viewport
XS (<576px)100%
S (576-768px)100%
M (768-992px)50-100%
L (992-1200px)50-100%
XL (1200-1600+px)50-100%
Spacingpxrem
Title & grid line241.5
Base grid line & data increment161
Data increment & edge of graph161
Data increment & label201.25
Between: grid lines (minimum)322
Between: horizontal data increments (minimum)322
Key: graph & border line241.5
Key: border line & key text241.5
Key: key label & data value labels100.625
Key: data value labels201.25
Key: color swatch and data value label100.625

** Structure and spacing for the base graph ** Structure and spacing for the base graph | px / rem

States

When a graph is not yet populated with data or has been filtered down so much that there is no data to display, an empty graph state should be shown. The base graph should be set to 30% opacity and have a message prompting the user to reset filters or another call to action to help get the data up and running.

** Example of a graph with no data matching the parameters ** Example of a graph with no data matching the filter parameters