Style Trend

Trend (v2.0.0+)

A compact tile for one sensor (or a few): the name and icon, the current value in large type, and its recent history as a graph filling the bottom of the card edge to edge. Hover or drag along the graph and the big number shows the value at that moment. It is made to sit in a sections dashboard as a small tile, and takes the options people know from mini graph cards.

Good for

At-a-glance tiles on a dashboard: a room's temperature, the house's power, a battery, a price, with just enough history to see which way it is going.

Example

type: custom:chartdeck-card
style: trend
entities:
  - entity: sensor.living_room_temperature
    name: Living room

To use this style, set style: trend (or pick Trend under History charts in the editor's Style section). The chart options are in the editor's Chart section.

Sensible defaults

• A line with a faded fill under it (graph: line, fill: fade), 2.5 px wide.
• One point every two hours (points_per_hour: 0.5): readings are combined into even buckets (the time-weighted average by default). 0 draws every reading on a line.
• The last 24 hours when period isn't set.
• Dots and the highest and lowest labels show on hover (points: hover, labels: hover).
• The graph keeps its shape: height is per 500 px of the card's width (150 by default).
• In a sections dashboard it takes a small tile: 6 columns wide (at least 3), at least 2 rows high, not the full width.
• Colour bands colour the graph when the card or the entity sets them, blending between bands (color_transition: smooth); otherwise the series colour is used.

Options

graph: line            # line (default), bar or none (value only)
fill: fade             # fade (default), solid or none; true is fade, false is none
curve: smooth
line_width: 2.5
points_per_hour: 0.5   # buckets per hour, 0 to 60; 0 draws every reading on a line
points: hover          # hover (default), always or never; true/false work too
labels: hover          # highest and lowest labels: hover, always or never
height: 150            # graph height per 500 px of width
bar_spacing: 4         # px between bars
color_transition: smooth  # smooth (default) or hard: change at each band
extrema: false         # chips with the lowest and highest
average: false         # a chip with the average
legend: true           # a legend when there are two or more entities
y_min: "~0"            # a number is a hard end; "~N" a soft one that moves out to fit readings
y_max: 30
min_range: 2           # the smallest value range the graph spans
y_min_secondary: "~0"   # the same three for the right-hand axis
value_factor: 0        # scale the shown value by 10 to this power (-9 to 9)
align_header: default  # default (spread out), left, right or center: name and icon
align_icon: right      # right, left or state (beside the value)
align_state: left      # left, right or center: the value
font_size: 100         # value size in %
font_size_header: 14   # name size in px
color_name: false      # colour the name, value or icon with the current colour
color_value: false
color_icon: false
group: false           # no background, for a tile inside another card
icon_image: /local/boiler.png   # an image instead of the icon
tooltip: true          # show the value under the pointer

Per entity:

entities:
  - entity: sensor.outside_temperature
    color: amber
    curve: straight
    line_width: 2
    aggregate: max       # how its buckets combine readings
    y_axis: secondary    # its own scale on the right
    fixed_value: false   # draw the current value as a flat line
    show_state: true     # its value beside the main one
    show_indicator: true # a dot coloured by its value
    show_graph: true
    show_line: true
    show_fill: true
    show_points: true
    show_legend: true
    show_legend_state: false

• graph: bar always buckets (a bar per reading would be a hairline); several entities sit side by side in each bucket, and each bar takes its own value's band colour.
• graph: none leaves just the header and value.
• The first entity is the main one: its name, icon and value are the header.
• Tapping the header or the value runs the entity's tap action (more-info by default).

In the editor, every option above is in the Chart section: points per hour, graph, fill, curve, line width, dots, labels, height, bar spacing, band colours, the lowest/highest, average, legend and hover switches, the bounds for both axes, alignment, sizes, colour switches, No background (inside another card) and Image instead of the icon. Each entity's options are in its own row.

Everything else

The period, calendar spans, previous and next buttons, source and grouping are the same as on the line chart. See Line.

Layout: one tile for the whole card. Every shared option is described on the Options page.

Previous: 24-hour clock · All styles