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 and how they find the site, so we can improve it (Google Analytics).

Show us which of our ad campaigns bring visitors to the site and remember the campaign or partner link you arrived from (Google Ads, 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
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

Occupancy Count Card

  • Widget
  • 6 installs
  • v1.1.0
  • Oct 7, 2026
  • MIT license
  • v4.2+

Single-value occupancy card that counts people in a room or bathroom. Supports a fixed or telemetry-driven capacity, threshold-driven accent colors (normal / near capacity / full), a capacity bar, a status badge, a relative “updated … ago” label and five layout presets (standard, compact, wide, typographic and a binary bathroom vacant/occupied mode).

Widget Type
  • Latest
Category
  • Cards & Info
  • Gauges & Indicators
Use Cases
  • Smart Office
  • Smart Building
  • Smart Retail
  • Smart Home
  • Smart City
  • Health Care

Who it’s for

Facility and workplace dashboard authors who need to answer “how full is this space right now?” at a glance — a meeting room, a cafeteria, a whole floor, or a single-occupancy restroom. The card is built for wall displays and shared floor-plan dashboards where nobody hovers for a tooltip: the current head-count, how close it is to capacity, and whether it is getting crowded all read instantly. <>

What it does

A room reporting 12 against a capacity of 40 shows a blue value and a bar at 30 %; the same card turns amber with a Near capacity badge at 80 % and red at 100 %, so a full room is obvious before you read the number. A single-occupancy layout instead flips between a green Vacant and an Occupied state for restrooms.

  • Five layout presets: standard (count + capacity bar), compact, wide (value + inline bar), typographic (big ratio) and binary (bathroom vacant / occupied)
  • Threshold-driven accent color with an optional status badge (normal / near capacity / full)
  • Capacity from a fixed number or a live telemetry key
  • Count, ratio (12 / 40) or percentage display, with an optional count/% toggle
  • Optional capacity bar, in/out footer and relative “updated … ago” label
  • Auto-adapts to light and dark dashboards
  • Shows one space at a time; it does not chart history or compare rooms

How to set up

Data keys

KeyRoleTypeDescription
Occupancy (first key)Main valueTimeseries / AttributeCurrent head-count, numeric. Any key not named capacity, in or out.
capacityMax capacity (optional)Timeseries / AttributeNumeric maximum; overrides the fixed Capacity setting when Capacity from data key points to it.
inEntered today (optional)Timeseries / AttributeCumulative people in; shown in the footer when Show in/out counters is on.
outLeft today (optional)Timeseries / AttributeCumulative people out; shown next to in.

The card needs one numeric key for the count. If that key has never reported, the card renders its title and icon with a -- value rather than an error, so an offline device looks empty rather than broken. With no capacity (fixed 0 and no capacity key) it shows just the count and unit, and hides the bar and percentage.

How to customize

  • To change the look — set Layout preset (standard, compact, wide, typographic, or binary bathroom).
  • To set the maximum — enter a fixed Capacity, or set Capacity from data key to read it live from telemetry.
  • To choose what the big number shows — set Display mode to count, ratio (12 / 40) or percentage; enable Show count / % toggle to let viewers switch at runtime.
  • To change the colors and thresholds — edit the Thresholds list (each entry sets a value, a color and an optional badge label) and pick Threshold compares = percentage of capacity or absolute count; enable Apply threshold color to the value text to tint the number too.
  • To label the card — set Card title and Subtitle (leave blank to use the entity name) and the Unit label; toggle Show icon.
  • To show or hide the capacity bar — toggle Show capacity bar (hidden automatically when there is no capacity).
  • To round the value — set Decimals (0–6; large numbers are grouped with the dashboard locale’s thousands separator).
  • To configure bathroom mode — in the binary layout set occupied when count is at least, the vacant/occupied labels and their colors.
  • To control the footer — toggle Show footer, Show “updated … ago” and Show in/out counters (with the in/out key names).

Tips

  • For crowd-sensitive spaces set Threshold compares to percentage and keep the 80 % / 100 % bands, so the same card works whether capacity is 10 or 500.
  • Use the wide layout with Show in/out counters for high-traffic spaces (cafeterias, entrances) — the inline bar plus “In … · out … today” reads well on a large display.

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.