Gauge Chart

A gauge chart looks like a speedometer and shows a measure of performance versus a target. Gauge charts are an excellent visual tool that communicates information simply and clearly.

The gauge chart of the StyleGuide is a CSS only chart. Only 10 different values can be displayed, which can be set by class modifiers. The class modifiers for setting the values are .gauge-chart--value-{2..10}. Value one is the default.

The basic HTML looks like this:

<div class="gauge-chart">
  <div class="gauge-chart__ring">
    <div class="gauge-chart__pointer"></div>
    <div class="gauge-chart__label-center">text</div>
    <div class="gauge-chart__label-start">text</div>
    <div class="gauge-chart__label-middle">text</div>
    <div class="gauge-chart__label-end">text</div>
  </div>
</div>

NOTE The labels are optional and can be omitted.

TIP Tooltips can be attached to the labels for a better explanation of the chart.

In the example below, the gauge chart is displayed and a script changes the displayed value and the centered label:

Modifier

There are a number of modifiers that can be used to customize the chart. These are described below:

• .gauge-chart--value-{2..10} sets the value (pointer of the chart) to the corresponding value
• .gauge-chart--scale-{xs, xl, xxl} changes the size of the chart
• .gauge-chart--stretch use size of the container
• .gauge-chart--invert inverts the left and right colors

Stretch

Here is a simple stretch example.