🚀 New Features & 🐛 Bug Fix

🚀 Built-in Swipe Container — several charts in one card, with page navigation buttons - graph_group

type: custom:statistics-graph-chart-card
height: 166
show_y2_axis: true
animate_graph: true
entities:
  - entity: sensor.temperature
    graph_group: Salon
    color: '#ff0000'
    line_width: 1
    state_size: 20px
    state_color: '#ffffff'
    trend_icon_size: 25px
  - entity: sensor.humidity
    graph_group: Salon
    hide_name: true
    color: '#0000ff'
    y_axis: secondary
    line_width: 1
    state_size: 20px
    state_color: '#ffffff'
    trend_icon_size: 25px
    align_state: right
  - entity: sensor.temperature_2
    graph_group: Yatak Odası
    color: '#ff0000'
    line_width: 1
    state_size: 20px
    state_color: '#ffffff'
    trend_icon_size: 25px
  - entity: sensor.humidity_2
    graph_group: Yatak Odası
    hide_name: true
    color: '#0000ff'
    y_axis: secondary
    line_width: 1
    state_size: 20px
    state_color: '#ffffff'
    trend_icon_size: 25px
    align_state: right
  - entity: sensor.temperature_3
    graph_group: Çocuk Odası
    color: '#ff0000'
    line_width: 1
    state_size: 20px
    state_color: '#ffffff'
    trend_icon_size: 25px
  - entity: sensor.humidity_3
    graph_group: Çocuk Odası
    hide_name: true
    color: '#0000ff'
    y_axis: secondary
    line_width: 1
    state_size: 20px
    state_color: '#ffffff'
    trend_icon_size: 25px
    align_state: right

A card used to be one chart: every entity on the same axes, or a second card beside it. Each entity now takes a graph_group, and the card draws every group on a page of its own — entities that share a name are drawn together, entities without one stay on the main page — with a small strip directly under the graph to switch between them: a dot per page with ‹ and › right beside the dots, centred. The arrows stay at the edges whatever the length of the name. Three temperature sensors in a Climate group next to an ungrouped power sensor make two pages: the power bars on the main page, the temperatures on the Climate page; hover a dot to see which group it is. Pages come in the order their names first appear in the entity list, the card opens on the first page — the main page in this example, because the power sensor comes first — and it remembers the page you picked until the dashboard is reloaded. The pages share everything but the drawing: one fetch, one height, one date / interval / resolution picker, zoom, pan and crosshair pins, the card-level bounds and annotations, tooltip / zoom / scroll sync — turning a page draws a different set of entities and fetches nothing. The compact legend, the per-entity statistics legend and the state row follow the page on screen — turning the page swaps the live values along with the chart, so a card whose pages differ in size changes height a little between them. CSV export writes every page, the chart PNG the page on screen, the card PNG the card without the page indicator. Works in every chart mode — a Timeline card as much as a pie, ranking, gauge or heatmap (a page per entity gives one heatmap per page) — and on sparkline cards, where the page strip sits under the rows. A page is turned by a click or tap on an arrow or a dot (Enter or Space on a focused dot works too); the arrows stop at the first and last page. Nothing inside the plot turns a page — a mouse drag still zooms, and on a touch screen the tooltip, the long-press zoom, the pinch and the pan of a zoomed chart work as before. The strip sits directly under the plot, never over the x-axis dates, and shows no names — just the dots and the arrows as one compact group, so nothing moves as you page through. Because the strip has a row of its own, a paged card with a numeric height is about 22 px taller than the same card without pages; with height: auto in a Sections grid or a Panel view the card keeps the size of its cell and the plot gives up that strip instead. What the pages cannot do: all share one chart_mode, one height and the card bounds, and entities on different pages are never drawn together, so they cannot stack — stack_group keeps arranging the stacks within a page. Not templatable. In the editor the field is Graph Group on the per-entity Graph tab, right under Stack Group, in every chart mode; leave it empty to keep the entity on the main page. A card where no entity sets graph_group looks and behaves exactly as before.

🩹 coalesce() — count a missing value as 0 in attribute arrays (#438)

Some integrations only list a value when there is one — a charging plan with zon_laden_kwh on the sunny quarters and no such field at night. An element without the value field has no reading, so it draws no point, and an area or step chart joins the neighbours across the gap, holding the last daytime value through the night. data_value_expression now knows coalesce(a, b, …), which returns its first argument that is a number, so coalesce(zon_laden_kwh, 0) turns every element without that field into 0 and the area drops to zero overnight. It also falls through a chain of fields (coalesce(override, price, 0)) and treats a division by zero or an unavailable data_vars entity as empty. Nothing changes for cards that don't use it.

  - entity: sensor.peblar_horizon_planner_grafiek
    graph_type: area
    line_shape: hv
    data_attribute: plan
    data_time_field: tijd
    data_value_expression: "coalesce(zon_laden_kwh, 0)"

🟩 State timeline slices — an uptime view per hour or day (#437)

A State Timeline row draws every state change where it happened, so over a week a busy sensor turns into a crowd of thin stripes. The new state_timeline_bucket cuts every row into equal time slices instead — one rounded block per 15 minutes, hour, day, week or month (15m, 1h, 6h, 1d, 1w, 1mo …) — each in the colour of the state that lasted longest in it. A binary sensor's hour turns the on colour when it was on longer than off; a presence sensor's day takes the colour of the room you spent most of it in. The colours are the entity's state_map colours; a state without one gets a colour of its own automatically. Hover a slice to see the share of every state in it (On 73%, Off 27%); a slice without any data is muted grey. For the classic uptime look, give the entity color_thresholds: the slices are then coloured by the share of one state — the new per-entity share_state, on by default — for example green above 99 %, amber above 95 %, red otherwise. state_timeline_show_share: true writes that share at the end of each row (On 99.6%), with or without slices. Slices follow your time zone and calendar — hours from midnight, days at midnight, weeks on your first day of the week, months on the 1st — and work with the date picker, scrolling, compare rows and tap actions. If the slices would be too thin to see, the row stays continuous and the browser console suggests a larger slice. In the editor: Slices and Show Share under Chart → Visual Options in State Timeline mode, Share State on the entity's Advanced tab under the State Map. The slice size is an option of its own — group_by does not slice the State Timeline. Nothing changes for cards that don't set these options.

type: custom:statistics-graph-chart-card
chart_mode: state_timeline
hours_to_show: 168                  # one week
state_timeline_bucket: 1d           # 15m, 30m, 1h … 12h, 1d, 1w, 1mo; unset = continuous bars
state_timeline_show_share: true     # e.g. "Connected 99.6%" at the end of the row
entities:
  - entity: binary_sensor.nas_online
    name: NAS
    share_state: "on"               # optional: the state whose share counts (default on)
    color_thresholds:               # optional: colour each slice by that share
      enabled: true
      values:
        - value: 0                  # 95 % or less → red
          color: "#e53935"
        - value: 95                 # above 95 % → amber
          color: "#fb8c00"
        - value: 99                 # above 99 % → green
          color: "#43a047"

---

⚠️ Behaviour changes

• 🚦 State Timeline cards are as tall as their rows. The card used to keep the full height (150 px by default, or the 200 px minimum of height: auto) and leave the space under the last row empty; it now ends right under the rows, so a one-row timeline is a compact strip. In a Sections grid with a fixed number of grid_options.rows the card still fills its cell.