Chart 9 of 15

Gauge bar against a target

Use it for one value against one target: a budget, a quota, a limit. State is shown by colour and by the words on the right, so it never relies on colour alone.

Live demo

Made-up data. Try the options, then switch to the empty and one-point states.

Each row has a tooltip title with the exact amounts; the words beside the bar carry the status.

How to use it

JavaScript
container.append(
  gauge({ label: 'Groceries',  value: 520, target: 600 }),   // on track
  gauge({ label: 'Transport',  value: 195, target: 200 }),   // nearly
  gauge({ label: 'Eating out', value: 340, target: 250 })    // over: bar full, marker at the target
);

Options

label
Name shown on the left (and in the tooltip).
value
What has been used so far.
target
The budget or limit. Used above 85% shows 'nearly'; above 100% shows 'over' and a marker at the target.