v1.2.0

The first history chart. style: line draws how one or more sensors changed over the last hours, days, weeks or months, from the recorder's history or its long-term statistics, and keeps itself up to date as new states arrive. It comes with value and time labels and gridlines, a hover and touch readout, per-line widths, dots and stacking order, and a compact layout for tight dashboards. Everything is settable from the visual editor's new Chart section. Nothing about your existing cards needs changing: the bar and gauge styles draw exactly as before.

Added

Line chart

• A card can now show a sensor's history as a line chart. Set style: line (or pick Line under History charts in the Style section) and the card draws every listed entity as a line over the chosen period, with a row above the chart giving each entity's colour, name and current value. Tapping a name opens the entity, and hold and double-tap actions work as on the other styles. (#86, closes #9)

  type: custom:chartdeck-card
  style: line
  title: Temperatures
  period:
    last: 2
    unit: day
  source: history
  curve: smooth
  entities:
    - entity: sensor.living_room_temperature
      name: Living room
    - entity: sensor.outside_temperature
      name: Outside
      color: orange
      dash: true

  • period sets how far back it looks: last is a whole number and unit is hour, day, week or month. The default is the last 24 hours.
  • source: history (the default) reads every state change from the recorder. source: statistics reads long-term statistics instead, which reach back much further but only exist for sensors with a state_class; the card picks 5-minute, hourly, daily or monthly statistics to suit the span.
  • New states are added to the chart as they arrive over the existing connection, with no polling. When the card leaves the screen or the connection drops, loading pauses and picks up again when it comes back.
  • curve is smooth (which never overshoots a reading), straight or step, for the whole card or per entity. Each entity can have its own color (a palette name or any CSS colour) and can be drawn dashed.
  • color_by: bands colours the line by the card's colour bands, so it changes colour where it crosses a threshold. labels: true prints the value at each point, and is skipped on a series with more than 40 points where the labels would overlap.
  • Times when a sensor was unavailable are left as gaps rather than joined across. Long histories are thinned before drawing so a wall tablet stays quick.
  • While history is loading, if it fails, or if there are no readings in the period, the card says so in place of the chart.

Axes and gridlines

• Line charts have value labels up the side, time labels along the bottom and light gridlines across the plot, so a reading can be checked without hovering. (#87, closes #48)

  axis_labels: outside
  gridlines:
    horizontal: true
    vertical: true
  y_min: 0
  y_max: 30

  • Value labels use round steps (1, 2 or 5 times a power of ten), and the range fits the readings with a little headroom, rounded out to the next step. y_min and y_max fix either end exactly; a reading beyond a fixed end is cut off at the plot's edge, and a y_min that isn't below y_max is reported as a config error.
  • Time labels land on round wall-clock times that suit the span: every few minutes or hours (with the day's name at midnight), day names across a week, day and month for longer, then months (with the year at January) and years. They follow the language, 12/24-hour clock and time zone set in your Home Assistant profile, and stay on local midnight across clock changes.
  • How many time labels fit follows the card's width, and is re-worked when the card is resized.
  • axis_labels: outside (the default) puts the labels beside the plot; inside lays them over the plot's edges to give the lines the full width. x_axis: false or y_axis: false hides either set.
  • gridlines.horizontal is on by default and gridlines.vertical off. The lines and labels take the theme's divider and secondary text colours, so they suit light and dark themes.
  • All of it is in the editor's Chart section.

Hover and touch readout

• Moving the pointer over a line chart, or dragging a finger across it, shows every series' value at that moment. A vertical guide follows the pointer with a dot on each line, and a box lists the time and each entity's value with its own decimals and unit. (#88, closes #39)

  tooltip: true

  • The guide snaps to the nearest reading in time across all the series. An entity with no reading at that moment (unavailable, or in a gap) shows a dash and gets no dot.
  • The box sits to the right of the guide when there is room and to the left when there isn't, and is pinned to the plot's edge on cards too narrow for either.
  • On a phone, sideways drags read the chart while up-and-down still scrolls the page, and the box stays up for three seconds after your finger lifts so it can be read. With a mouse it hides as soon as the pointer leaves the plot.
  • Tapping, holding or double-tapping a name in the row above the chart still runs its action; the readout only listens on the plot.
  • It's on by default. Show values on hover or touch in the Chart section (tooltip: false) turns it off.

Line widths, dots and drawing order

• Each line can have its own width, a dot at each reading, and be drawn above the others, so a thick outside temperature can stay on top of thin room lines where they cross. (#89, closes #51)

  line_width: 1.5
  dots: false
  entities:
    - entity: sensor.bedroom_temperature
    - entity: sensor.kitchen_temperature
    - entity: sensor.outside_temperature
      line_width: 4
      dots: true
      on_top: true

  • line_width (0.5 to 12 px, 2.5 by default) and dots are set on the card and can be overridden per entity.
  • Lines are drawn in the listed order, so the last is on top; any marked on_top are drawn after those. The names row and the hover readout keep the listed order either way.
  • Dots mark real readings only, not the value carried to the chart's edge, and take the line's colour (or the band colour with color_by: bands). They are left off a series with more than 200 readings, where they would merge into a thick line.
  • In the editor the card-wide width and dots are in the Chart section. Each entity's width, dots and Draw above the other lines sit with its colour, shape and dash options. An entity's dots switch shows the card's setting until you change it, and switching it back removes the override.

Compact layout

• A line chart can be drawn tighter for dashboards where space is short, with its names row moved over the chart or hidden. (#90, closes #52)

  compact: true
  header: over

  • compact: true cuts the padding round the card, tightens the names and values row, shortens the plot from 180 to 110 px and uses smaller axis text.
  • header places the names and current values: above the chart (the default), over the chart's top-left corner on a light wash of the card's background with the value a little larger, or hidden.
  • Names drawn over the chart still open their entity on tap, and pressing them doesn't also move the hover readout. While the chart is loading or has no readings, the names go above the message instead. With axis_labels: inside, the top value label is hidden so it doesn't sit under the names.
  • A hidden header leaves nothing to tap, so the entities' tap, hold and double-tap actions have nothing to attach to.
  • Both are in the Chart section, as Names and values and Compact.

Changed

• The style picker is grouped by kind. Bars, gauges and history charts now sit under their own headings in the editor's Style section, ready for the charts still to come. Under the hood a style can now draw the whole card as one chart, with its own option checks, editor section and thumbnail. The seven bar and gauge styles are unchanged. (#85)

Upgrading

Nothing to do: existing cards keep working exactly as they did. Update through HACS and reload your browser, then pick Line in the Style section of any card, or add style: line to its YAML.

Every line chart option is on the new wiki page Line, with sections on period and source, lines, axes and gridlines, hover and touch and the compact layout. source: statistics needs the sensor to have a state_class; without one, use the default source: history.

Full changelog: v1.1.0...v1.2.0

v1.1.0

Four new features, all from the roadmap: a card can now fill itself from a label, area, floor or device class, an entity can be drawn from one of its attributes instead of its state, and colour bands can start at another entity's value and change the icon as the value moves between them. Everything is settable from the visual editor. Nothing about your existing cards needs changing.

Added

Fill the card from a rule

• New devices turn up on the card without editing the dashboard. Instead of picking every entity, include fills the card from a rule: every battery in the house, or the temperature and humidity sensors in one room. exclude takes things back out. (#80, closes #56)

  type: custom:chartdeck-card
  style: bar
  include:
    area: kitchen
    device_class: [temperature, humidity]
  exclude:
    entity: sensor.oven_probe
    label: ignore
  hide_unavailable: true
  limit: 5
  sort: descending

  • include matches by label, area, floor, device_class or domain. Values under one key are alternatives; different keys must all match. So "every battery" is device_class: battery, and "the temperature sensors in the kitchen" is area plus device_class.
  • exclude takes the same keys plus entity, and leaves out anything that matches any of them.
  • An entity's label and area can come from the entity itself or from its device, and its floor comes from its area.
  • Only entities with a number to show are matched, so an area rule doesn't pull in the room's lights and switches. Entities hidden in the entity registry never match.
  • Entities you list under entities come first, then the matched ones by name. Matched entities take the card-wide options.
  • The card re-checks its rules whenever the registries or states change. Moving a sensor into the kitchen on the dev Home Assistant put it on the card within a couple of seconds, and moving it out took it off again.
  • In the editor the rules sit under the entity list, as Also show every entity that matches and Leave out, using Home Assistant's own area, floor, label and device class pickers.

• Unavailable entities can be left off the card. hide_unavailable: true drops every entity that is unavailable or unknown, whether you listed it or a rule matched it. It works on any card, not only rule-filled ones. In the editor it's Hide unavailable entities under Display. (#80)

• A card can show just the top few. limit: 5 keeps the first five entities after sorting, so sort: ascending with limit: 3 gives you the three flattest batteries in the house. With sort: none it keeps the first ones in order. In the editor it's Show at most under Display. (#80)

Values from an attribute

• A thermostat's temperature, a weather entity's humidity or a media player's volume can be drawn directly, without a template sensor in between. Give an entity an attribute and the card draws that attribute instead of the state. The editor offers a drop-down of that entity's own attributes in its row options. It works in every style. (#77, closes #53)

  entities:
    - entity: climate.lounge
      attribute: current_temperature
      unit: °C
    - entity: weather.home
      attribute: humidity
      unit: '%'

  • An entity's unit and display precision describe its state, not its attributes, so neither is used for an attribute. Set unit yourself. The decimals follow how the attribute was reported (at most 2) until you set decimals.
  • If the attribute isn't there, the card falls back to the entity's state, so a media player that is switched off reads "Off" rather than "Unavailable". An attribute that holds text shows the text.

Colour bands

• A colour band can start at another entity's value, the same way min, max and target already could. A battery can turn red below a level kept in an input number, or a tank warning can follow a threshold an automation sets. (#78, closes #54)

  severity:
    - from: 0
      color: red
    - from: input_number.battery_warning
      color: amber
    - from: 70
      color: green

  • When the threshold entity changes, the bar colours, the needle gauge's coloured arc and the legend all move with it straight away, without a reload. Moving an input number from 40 to 20 on the dev Home Assistant recoloured the bars and moved the legend and needle arc as it went.
  • The bands are re-sorted after the entity values are read, so a threshold that moves past its neighbours still lands in the right order.
  • A band whose entity is missing or isn't a number is left out, with one warning in the browser console, the same way a missing min or max entity is handled.
  • In the editor each band has a Start from an entity button. The entity picker opens under the band, and the From box stays visible, greyed out, showing the entity's current value.

• The icon can change colour with the band, so a battery icon turns red when it's low. Turn on color_icon: true (Colour icons to match their band in the editor's Colours section) and each icon takes the colour of the band its value is in. (#79, closes #55)

• Each band can have its own icon, shown while the value is in that band, such as a different icon for a tank that's nearly empty. (#79)

  color_icon: true
  severity:
    - from: 0
      color: red
      icon: mdi:battery-alert-variant-outline
    - from: 20
      color: amber
    - from: 50
      color: green
      icon: mdi:battery

  • A band's icon wins over the icon set on the entity. A band without one leaves the entity's icon alone.
  • Unavailable entities keep their usual icon and colour, since "below the first band" isn't a real reading.
  • Both work in every style, including inside the ring and arc gauges.

Changed

• Colour band rows in the editor are now two lines. The first has From, Colour, the new entity button and remove; the second has Label and the new Icon picker. Existing bands are untouched. (#78, #79)

Upgrading

No action needed. Every new option is off unless you set it, so existing cards draw exactly as before. Update through HACS and hard-refresh the browser (or clear the app's frontend cache on the companion app) to pick up the new card.

The wiki covers each option in full: include and exclude, hide_unavailable, limit, attribute, thresholds from an entity and icons that follow the band.

Full changelog: v1.0.1...v1.1.0

v1.0.1

A tidy-up release. After 1.0 I rendered every style around 800 different ways (every combination of the show options, one and five entities, one to three columns, narrow and wide cards, sensors that are offline or don't exist) and fixed everything that didn't look right. Nothing about your existing cards needs changing.

Fixed

Gauges

• Turning off Show value on a ring or arc now moves the icon into the middle of the dial and makes it bigger, instead of leaving it parked above an empty space.
• The needle gauge closes up when its value is hidden. It used to keep a blank strip where the number had been, and an offline needle kept its "Unavailable" line, so names in a row of needles didn't line up. Now they all line up, and an offline needle says so inside its dial.
• The three-quarter arc no longer has an empty band under its open bottom.
• "Entity not found", and longer translations of "Unavailable", used to run into the ring. Status text now wraps onto two lines where that helps and shrinks to fit the hollow. Chinese and Japanese text is measured properly too.
• Under a full-height needle, a status that fits on one line stays on one line.
• Ring, arc and needle gauges shrink to fit a very narrow card instead of sticking out of it. In normal-sized cards they stay full size and still sit side by side.
• On iPhone and Safari, ring and arc fills now have a solid colour to fall back on if their gradient can't be drawn, so the arc can't disappear.

Bars

• Setting more columns than a card has room for used to overlap the gauges and squash the bars into slivers. Now the card simply uses fewer columns when it's too narrow (see Changed below).
• A sensor whose entity id doesn't exist now gets a placeholder icon, so its bar lines up with the others instead of starting further left.
• With Show value off, bars, thin bars and tanks used to say nothing about a sensor that was offline or missing, so it just looked empty. They now show "Unavailable" or "Entity not found" either way, the same as the gauges.
• Segmented bars: the strips of cells now end at the same place on every row. A row for an offline sensor shows that on its name line, so its cells line up with the rest. With two or three columns, each column switches to the narrow layout on its own when it gets tight.
• Tanks are evenly spaced, their names can use the full width of the tile instead of being cut at 72 px, and a second row of tanks lines up under the first.
• Bar text on a see-through custom colour (something like rgba(255, 255, 255, 0.15)) was white and hard to read in light themes. It now uses your theme's text colour on fills like that.
• Titled cards reserve the right height in masonry dashboards, and the height estimate counts only the columns that actually fit, so masonry balances its columns better.

Visual editor

• Choosing Custom… for a band colour no longer rewrites the colour straight away. The text field opens with the current colour already in it, and nothing changes until you type a new one.
• Add band continues 10 above your last band even when that threshold was written as text in YAML (from: "20"). It used to jump back to 0.
• The threshold fields in Colours now show the unit the card actually displays: the entity's own unit if you set one, otherwise the card's, otherwise the sensor's.
• Decimals can be set from 0 to 20 in the editor, the same as in YAML. It used to stop at 6.

Changed

• columns is now a maximum. Each style needs a minimum width per column (bars 160 px, thin 140, segmented 180, tank 80, ring and arc 128, needle 134), and when a card is too narrow for the number you've set, it uses fewer columns rather than squeezing them. Wide cards look exactly as before.
• The Display section of the editor is a tidy list now: one switch per row, right next to its label, with Animate alongside the show options. You can click the label text to flip a switch, and screen readers announce what each switch is for.

Upgrading

Update through HACS, or download chartdeck-card.js below and replace the old file, then refresh your browser. No configuration changes are needed. If you've set columns higher than fits on a phone, you'll see fewer columns there now, which is the point.

The docs are updated for the new columns behaviour and the editor: https://tempus2016.github.io/chartdeck/

v1.0.0

The first release of Chartdeck: seven ways to show sensor values as bars and gauges, all from one card and all set up in the visual editor. Everything is drawn by the card itself in SVG and CSS, with no chart library, and the whole card is about 23 KB gzipped.

Added

• Seven styles, switched with one setting: classic bar (the default), thin bar, segmented, tank, ring, half-circle needle and three-quarter arc. Names, limits, colours and actions carry across when you switch.
• Limits from anywhere: min, max and target each take a number or another entity, so a battery can fill against a sensor's capacity, or a target can follow a helper.
• Colour bands: "from this value up, use this colour". There are presets for Battery (low is bad), Usage (high is bad) and Temperature, and an optional legend. The named colours use your theme's success, warning, error and info colours, so they follow light and dark mode.
• Sensible defaults: decimals follow the entity's display precision, the icon follows the entity registry, and the unit follows the sensor. Every one can be overridden per entity.
• Negative ranges: when min is below zero and max above it, bars fill from zero and the gauges start from the zero point.
• Sort by value: lowest or highest first, by how full each bar is within its own range. Unavailable entities go last.
• Actions: tap, hold and double-tap in Home Assistant's current action format. Tap opens more-info by default.
• Fits every dashboard: masonry, sections (it sizes itself to the grid) and stacks.
• Motion: values draw in on load and move smoothly when they change. Motion turns off with animate: false or when your device asks for reduced motion.
• Visual editor for every option: entities with per-entity overrides, a style picker with previews, limits, colour bands, display options and actions. YAML is optional, and the editor keeps anything it doesn't show.

Upgrading

Nothing to upgrade, this is the first release. Install it through HACS as a custom repository (category Dashboard), or download chartdeck-card.js below and add it as a dashboard resource. Then add a Chartdeck card from the card picker. It needs Home Assistant 2025.1 or later.

Documentation for every style and option is on the wiki.