Speedometer

A speedometer shows a measure of performance versus a target. Speedometer are an excellent visual tool that communicates information simply and clearly.

The speedometer 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 .speedometer--value-{2..10}. Value one is the default.

The basic HTML looks like this:

<div class="speedometer">
  <div class="speedometer__chart">
    <div class="speedometer__step-start"></div>
    <div class="speedometer__step-middle"></div>
    <div class="speedometer__step-end"></div>
    <div class="speedometer__inner"></div>
    <div class="speedometer__arrow"></div>
  </div>
  <div class="speedometer__label-center">center</div>
  <div class="speedometer__label-start">start</div>
  <div class="speedometer__label-middle">middle</div>
  <div class="speedometer__label-end">end</div>
  <div class="speedometer__label-1">value-1</div>
  <div class="speedometer__label-2">value-2</div>
  <div class="speedometer__label-3">value-3</div>
  <div class="speedometer__label-4">value-4</div>
  <div class="speedometer__label-5">value-5</div>
  <div class="speedometer__label-6">value-6</div>
  <div class="speedometer__label-7">value-7</div>
  <div class="speedometer__label-8">value-8</div>
  <div class="speedometer__label-9">value-9</div>
  <div class="speedometer__label-10">value-10</div>
</div>

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

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

Theme basic Screen size XL

html

Labels

The labels are optional and can be omitted. The start .speedometer__label-start and .speedometer__label-end labels are at the same position as .speedometer__label-1 and .speedometer__label-10, so you should avoid to use them both in the same chart.

Theme basic Screen size XL

html

Modifier

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

.speedometer--value-{2..10} sets the value (pointer of the chart) to the corresponding value

Displace

The .speedometer--displace modifier change the position of the inner circle, looks & feels more aggressive.

Theme basic Screen size XL

html

Scale

The .speedometer--scale-{small, large} modifier changes the size of the chart.

Theme basic Screen size XL

html

Stretch

With the .speedometer--stretch modifier the chart will change the size based on the parent width.

Theme basic Screen size XL

html

Invert

The .speedometer--invert modifier inverts the left and right colors.

Theme basic Screen size XL

html

Mirror

The .speedometer--mirror modifier reflects the complete chart, except for the texts.

Theme basic Screen size XL

html

Combination

You can combine all described modifier, labels and tips. Here is an example

Theme basic Screen size XL

html