Value and chart card

Who it’s for

Anyone reading a meter rather than a sensor — water, gas, electricity, production counts. The current figure alone is not the answer; the question is whether today is high or low compared with the period, and that needs the latest reading, the aggregates around it, and a hint of the shape over time on one tile.

What it does

The Value and chart card puts a headline reading in the middle, aggregated figures in the corners, and a simplified chart of the same series underneath. A water meter feeding this card can show the latest total in the center, the period average top right and the maximum bottom right, each with an up or down arrow against the previous period, over a small area chart of the window.

• One tile, several readings of the same series — each data key carries its own aggregation and its own corner, so latest, average, minimum, maximum and total sit around one number without five separate widgets.
• Up and down arrows put each figure in context, marking whether it rose or fell rather than leaving the reader to remember last week’s value.
• The chart is deliberately simplified — enough to show the shape and spot an outlier, not a full time series chart with axes to read.
• The subtitle accepts patterns such as ${entityName}, so a card duplicated across assets labels itself.
• The date line shows last update ago by default, which distinguishes a flat meter from a stopped one.
• Everything scales to the tile with auto scale, so one configuration survives being resized.
• The Value and chart card follows one telemetry key: several different measurements belong on separate cards, and a chart that has to be read precisely belongs on the Time series chart.

How to set up

Data keys

The Value and chart card takes one telemetry key, added several times with different aggregations.

Key	Role	Type	Description
watermeter	The headline figure and the corner aggregates	Timeseries	Add the same key once per figure you want, and set each one’s aggregation and position. Timeseries only — the card reads a window of history, so an attribute has nothing to aggregate.

Add the center key first, then one key per corner. Each key’s own settings decide where it lands and how it looks:

Setting	Default	Effect
Position	Center	Which slot the figure occupies — center, or one of the four corners
Font	Roboto	Size and weight for that figure alone
Color	Dark gray	Color for that figure alone
Display Up/Down arrow	Off	Marks whether the figure rose or fell against the comparison period

The chart and the aggregates read the dashboard’s time window, so the card’s meaning changes with it — a card captioned as a daily total is only correct while the window is a day.

How to customize

• To drop the chart and keep only the figures — turn off Chart, which leaves a compact numbers-only tile.
• To label the card from its entity — turn on Subtitle and set the pattern to ${entityName} or any text with placeholders, then style its font and color.
• To show an exact timestamp instead of a relative one — turn off last update ago under Date and pick a format, or hide the date.
• To emphasize the headline over the corners — give the center key a larger Font in its own key settings; each figure is styled independently.
• To mark direction of travel — turn on Display Up/Down arrow for the figures where a rise or fall is meaningful, and leave it off for totals where it is not.
• To keep proportions at any tile size — leave Auto scale on; turn it off to pin exact font sizes.

Tips

• Put the aggregate that decides action in a corner with an arrow, and the raw latest value in the center. Readers check the center for “what is it now” and the arrow for “should I care”, and the arrow is what makes the tile actionable without a second glance.
• Name the dashboard time window in the widget title. The card’s aggregates are entirely defined by that window, and a tile reading Average 41 means nothing to someone who does not know whether that is an hour or a month.