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

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

Charge point grid

  • Widget
  • 18 installs
  • v1.0.0
  • Nov 3, 2026
  • MIT license
  • v4.2+

Every charge point of a site as one tile, colored by its OCPP status: charging tiles show the power, free ones say Free, and a faulted one turns red. The grid sizes its tiles so the whole site fits the card, whether it has three charge points or thirty. A click on a tile runs a dashboard action, such as opening that charge point, and outlines it. States, labels, colors and icons are all editable, so any device status works too.

Widget Type
  • Latest
Category
  • Cards & Info
Use Cases
  • Smart Energy
  • Smart City
  • Fleet Tracking
  • Industrial Automation

Who it’s for

The Charge point grid widget is for operators of charging sites, parking garages and fleet depots who need to see every charger of a site at once. They want to know which connectors are free, which are charging and at what power, and which one is broken, without reading a table. The question they would type is “how do I show the status of all my EV chargers on one dashboard?”

What it does

A site has eight charge points that report status and power. CP-03 sends status = Charging and power = 21.8, so its tile turns indigo and reads 21.8 kW. CP-02 sends Available and reads Free in green, and CP-06 sends Faulted and turns red with Fault. An operator clicks CP-03: the tile gets an outline, and the dashboard opens that charge point.

  • Shows one tile per charge point, each with a tinted background, an icon and a label in the color of its status.
  • Shows the power on charging and paused tiles, and a short word such as Free, Done or Fault on the rest.
  • Sizes the tiles so the whole site fits the card with no scrolling. Three charge points fill the card with big tiles, and fifty become small colored squares whose name and value show on hover.
  • Runs a dashboard action when a tile is clicked, such as opening a state for that charge point, and outlines the tile that is open.
  • Ships with the nine OCPP 1.6 states. Every label, color and icon can be changed, and new states can be added, so the grid works for pumps, machines or any device that reports a status.
  • Shows the latest status of each entity. It does not draw history or alarms.

How to set up

Data keys

The Charge point grid widget takes a datasource with one entity per charge point, usually an entity alias such as all devices of a station, and two keys per entity.

  • Status — Timeseries or Attribute, such as status. Picks the state of the tile. The value is matched without regard to case, spaces or underscores, so Charging, CHARGING and charging all match. A value that is not on the States list shows in gray as it arrived. Without a value the tile reads No data.
  • Value — Timeseries or Attribute, such as power. Shown on the tile for states that have Show the value instead of the label on. Units and decimals come from the key’s own settings. Without a value the tile shows the state label instead.

Each key has a Role setting: Status, Value shown in the tile or Not shown. When roles are not set, the first key is the status and the second is the value.

States

  • States — the nine OCPP 1.6 states by default. Each state has a Status value to match, a Label, a Color, an Icon, and Show the value instead of the label:
    • Charging, SuspendedEV and SuspendedEVSE show the value;
    • Available shows Free, Preparing shows Plugged in, Finishing shows Done, Reserved shows Reserved, Unavailable shows Off and Faulted shows Fault.

Actions

  • On tile click — empty by default. Add an action that opens a dashboard state or updates a state entity. It receives the clicked charge point as the entity.

How to customize

  • To change the order of the tiles — set Order: By name by default, which puts CP-2 before CP-10; By state, in the order of the list above; or As the datasource returns them.
  • To show how many charge points are in each state — turn on Show counts in the header, off by default.
  • To stop outlining the open tile — turn off Outline the selected tile, on by default.
  • To rename the card — change the widget title, for example to the station name.

Tips

  • Put the grid on a station page and give On tile click an action that sets the charge point as the state entity. A control widget next to the grid then follows the tile the operator clicked, and the grid keeps that tile outlined.
  • Order the tiles By state during an incident, so faulted and free charge points are easy to find.
  • Leave the size to the grid: a taller card gives bigger tiles, and a site that grows only makes the tiles smaller.

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.