Simple Value and chart card
Displays a single entity historical telemetry values as a simplified chart. Optionally may display the corresponding latest telemetry value.
Who it’s for
Dashboard builders who want a reading with just enough history to be trustworthy. A number on its own does not say whether it is settling, climbing or bouncing; a sparkline behind it does, and the pair fits in a strip half the height of a real chart.
What it does
The Simple Value and chart card prints the latest reading beside a compact chart of the same series. A temperature sensor shows 23 °C at 28 px on the left with the recent trace filling the rest of the 4.5×2 tile, so a steady reading and a recovering one look different at a glance.
- Value and trend in one row — the reading answers “what is it”, the trace answers “and is that normal”, without the vertical space a full chart needs.
- The value sits left or right of the chart, so cards can be mirrored to put the numbers down the middle of a two-column layout.
- The chart can carry the whole tile — turn the value off and the card becomes a pure sparkline.
- Text scales with the tile, so the same card works in a narrow sidebar and a wide band.
- Units are converted, not just appended — the card respects the unit set on the key and converts to the unit chosen on the widget.
- The Simple Value and chart card shows one series with no axes, no legend and no tooltips: a chart meant to be read precisely belongs on the Time series chart, and aggregates around the value belong on the Value and chart card.
How to set up
Data keys
The Simple Value and chart card takes one datasource and one timeseries key.
| Key | Role | Type | Description |
|---|---|---|---|
Temperature | The printed value and the plotted series | Timeseries | Timeseries only — the card draws a window of history, so an attribute has nothing to plot. The key’s own units and decimals override the widget-level ones. |
The trace covers the dashboard’s time window, so the same card reads as a smooth line over a day and as a jagged one over an hour. Set the window to the period the card is meant to answer for.
How to customize
- To mirror the layout — set Layout to Left or Right to place the value on either side of the chart.
- To keep only the sparkline — turn off Value.
- To keep text proportional at any tile size — leave Auto scale on; turn it off to pin an exact font size.
- To make the number react to its own value — set Value color to a range or a gradient instead of a constant.
- To display in a different unit — set the widget’s Units; the card converts the incoming value. Decimals controls the printed precision.
Tips
- Give a column of these cards the same time window and the same layout side. The traces then compare directly, and a stack of sparklines reads as a small multiple rather than as unrelated tiles.
- Keep the window short enough that the trace still has shape. Over a month a slow sensor flattens into a straight line, which looks identical to a sensor that has stopped reporting — the exact confusion the sparkline was added to prevent.
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.