Gauge Chart

A chart that is very useful for indicating if something is good / bad, high / low, above / average etc.

Status

The status of the component

Documentation in progress

Figma component

A link to the Figma library where the component lives.

Repository

A link to the repo where the component lives.

-

 

Gauge chart overview

Best Practices


  • Gauge charts are used to measure only one metric.
  • Always start at the zero mark (bottom left of the gauge).
  • Use the default categorical color (ie. Teal).
  • Do not use multiple gauge charts to show change over time. A gauge chart shows the current state at a single point of time.

Usage Guidelines


Labels

Gauge charts may have a target label.

Gauge charts may also have a trend indicator acting as the center subtitle.

Gauge - trend indicator, positive
Gauge - trend indicator, negative
Gauge - target label

Responsiveness

The entire chart (including the center header) should proportionally resize as the chart grows/shrinks. For more information on center header resizing, please refer to the ‘Typography’ section of this documentation.

Gauge chart responsiveness