Skip to content

Cookie preferences

We use cookies for our own analytics, to see how our campaigns perform and, if you allow it, to load content from other services such as the Google site search. We never sell your data. Necessary cookies keep the site working and cannot be switched off. See our Cookie Policy for details and our Privacy Policy for how we handle personal data.

Security, load balancing and remembering your cookie choice.

Show us which pages people read, how they find the site and where they get stuck, so we can improve it (Google Analytics, Microsoft Clarity).

Show us which of our ad campaigns bring visitors to the site and remember the campaign or partner link you arrived from (Google Ads, LinkedIn, Meta, partner program). We do not use these cookies to build advertising profiles.

Load the site search from Google when you use it. Google sets its own cookies and shows ads in the search results.

© 2026 The ThingsBoard Authors
22.6k Try for free

ThingsBoard Cloud

Choose your data region

Your data stays in the region you choose, for residency and compliance. No credit card required.

Rather run it yourself? Install on your own servers

KPI scorecard

  • Widget
  • 4 installs
  • v1.0.0
  • Oct 27, 2026
  • MIT license
  • v4.2+

Six numbers, six targets, one card. Every measure takes a row: a bar for where it stands, a marker for the target it is judged against, and the track behind it shaded into poor, acceptable and good, so a row means something before anyone reads the scale. The gap is written out beside each row and colored by the direction you actually want, so a cap like scrap rate reads the right way round. Sort by whatever is furthest behind and the trouble comes to the top.

Widget Type
  • Timeseries
Category
  • Charts & Graphs

Who it’s for

Anyone who has to answer “are we where we should be?” about several numbers at once. A plant manager in a morning meeting with OEE, scrap, uptime and energy on one screen, a service provider showing a customer every number in the contract, a team lead who wants the measure that slipped to be the first thing anybody sees. Each of those numbers already has a card somewhere; what nobody has is the one place that says which of them is short.

What it does

A line running a shift: OEE 71% against a target of 80, first pass yield 96% against 97, uptime 99.4% against 99, scrap 1.8% against a cap of 2. Four different scales, four different directions, one card — and because every target sits in the same column, the row that stops short is obvious before anyone reads a number.

  • Lines every target up in one vertical rule, which is what makes measures on different scales readable against each other. A bar reaching past the marker is good news whatever the units are.
  • Knows which way is good. A cap such as scrap rate or energy use is better when it is lower, so its bands and its verdict read the other way round.
  • Writes the gap out in words — 11% below target — and colors it by that direction, so nobody has to work out whether red is bad this time.
  • Shades the track behind each bar into poor, acceptable and good, measured against each row’s own target, so one setting covers every measure on the card.
  • Puts trouble at the top on request: sorted furthest behind first, the card reorders itself as the shift goes on.
  • Fills the card it is given. The rows grow with the height, and once they are as large as they should get, the space left over goes between them rather than under them.
  • Scores one number per key against one target. It does not chart how that number got there, so a measure that needs its history belongs next to this card rather than in it.

How to set up

Data keys

Add one key per measure — from one device or from several, in any mix of units. Each key becomes a row, and each row is judged on its own: its own target, its own direction, its own scale.

  • Any numeric key — Timeseries or Attribute. The row’s number comes from the time window, taken the way Value says.
  • A key with no readings in the window — that row is left out rather than drawn empty.
  • No keys at all — the card shows No readings in this period.

Each key carries three settings of its own:

  • Target — empty by default. A number, or the name of a key that carries it, which is how a nameplate rating or a target stored as an attribute gets in. Without one the row still draws a bar on a round scale, with no marker and no verdict — useful, but not yet scored.
  • Direction — Higher is better by default. Switch it to Lower is better for anything that is a cap: scrap, downtime, cost, energy.
  • Bar scale — empty by default, which puts the target at the same place on every row. Set it to pin a row to a scale of its own, such as 0 to 100.

Rows

  • Value — Latest by default. How each row takes its number from the window: Total for things that accumulate, Average for rates, Lowest and Highest for the worst and best moments of the period.

How to customize

  • To put the worst measure first — set Row order to Furthest behind first, from As the keys are configured. Rows with no target keep to the end.
  • To show only the reading, or only the gap — set Numbers, The reading and the gap by default.
  • To read the gap as a difference rather than a share — set Gap format to Difference, from Share of target. Counts read better that way.
  • To turn the quality shading off — turn off Bands, on by default.
  • To move where poor ends and good starts — edit Band limits, 70, 100 by default, as a percent of target.
  • To match the card to your dashboard — set Bar color, which the bands take their shade from, and Ahead color and Behind color for the gap text.
  • To keep the text at a fixed size — turn off Scale to fit, on by default.

Tips

  • Targets are per key, so the same key on twenty devices can be scored against twenty different numbers by pointing Target at an attribute each device carries.
  • Leave Bar scale empty unless a row really needs its own scale. Lining the targets up is most of what makes the card readable.
  • A percentage that should never pass 100 is the one case where setting the scale to 100 reads better than lining it up with the rest.
  • Keep it to about six rows. Past that the card becomes a table, and a table is better at being a table.
  • Set Value to Total and the window to a shift, and the card reports the shift rather than the moment it was opened.

Share Your Widget with the Community

Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.