Sparkline graphs¶

According to the internet, a sparkline is a very small, simple data visualization designed to show a trend over time at a glance. Unlike traditional charts, it strips away all non-essential elements to maximize information density.

A "true" sparkline therefore has no axes, no grid and no labels.

From basic sparklines...¶

An example of such a true sparkline is shown in the next example: an extended horseshoe with a simple sparkline to show the trend over the last 24 hours.

A variant on this shows the radial sparkline chart (card #037) with variants showing minimal and maximal values (left) en the average values (right). Both show history for 6 days on the radial sparkline, and the current day on the horizontal sparkline in the middle.

Another example (card #061) shows a minimal card with an icon, sensor, state and a sparkline for today:

And last but not least, card #062 which is even more compact than card #061

...to more variations with axes, tick marks and labels¶

The Flexible Horseshoe Sparkline implementation is not limited to these "true" sparklines: you can add a grid, tick marks and labels to the sparkline graph.

This makes it easier in larger sparkline graphs to see how an entity value changes over time. Use it to follow a recent trend, see today's progress, compare rooms or sensors, or show when a named state was active.

Choose the time period, level of detail, and chart type that fit the information you want to see. A graph can remain compact and visual, or include axes, labels, statistics, a legend, and a tooltip for closer inspection.

Area	Barcode - Audio	Bars
Dots	Equalizer	State band

Basic usage¶

Add graphs to layout.sparklines and connect each one to an entity through entity_index.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

entities:
  - entity: sensor.living_room_temperature
    slot: temperature

layout:
  sparklines:
    - id: temperature-history
      entity_index: temperature[0]
      xpos: 50
      ypos: 50
      width: 80
      height: 35

      period:
        type: rolling_window
        rolling_window:
          duration:
            hour: 24
          bins:
            per_hour: auto
            density: medium

      sparkline:
        state_values:
          aggregate_func: avg
        show:
          chart_type: area

The entity index refers to the card-level entities list. Statistics and tooltip values use the formatting settings of the connected entity.

This example shows the average temperature for the latest 24 hours. Flexible Horseshoe Card chooses a readable number of time bins for the available graph width.

When the entity does not have a slot, use its numeric position in the card's entity list:

1
2
3

layout:
  sparklines:
    - entity_index: 0

Choose a setup¶

Start by deciding what the graph should help you understand:

For the current calendar period, the X-axis spans the full period while the graph fills up to the current time. A rolling window moves continuously and always shows the latest configured duration.

Chart types¶

Display support¶

Points can be added to line and area charts. Choose the standalone dots chart when every time bin should appear as an individual point without a connecting line.

Line, area, dots, and bar charts use Cartesian coordinates. A radial chart provides line, area, and dots around a circular arc. Equalizer, graded, state bands, barcode, and radial barcode each have their own chart page.

Position and size¶

Margins reserve space within the configured graph area. Cartesian labels and tick marks use this space. Increasing the graph’s outer size does not change the requested history period or number of bins.

Configure the graph¶

Show options¶

Not every option is available for every chart type. Radial barcode charts, for example, use a circular layout and therefore do not display a conventional X-axis or vertical indicator.

For line, area, and bar charts, both axes are calculated automatically. Use the individual x and y settings to choose which elements are visible; there is no need to define tick intervals or scale boundaries manually.

Existing configurations that use a boolean value, such as axis: true, continue to display both supported axes.

Color stops and statistics¶

Each bin keeps the values needed to calculate its aggregate and statistics. The tooltip can display the bin’s date or time together with its minimum, average, and maximum values. Number formatting and units come from the connected entity.

Statistics and active graph settings can also be added to the card's entities list. This makes values such as the displayed minimum, selected history duration, automatically calculated bin size, and aggregation function available to ordinary states and texts. See Sparkline values as entities for the available names and a complete example.

Color stops may apply to an entire path or to individual bins, depending on the chart type. Barcode and radial barcode charts calculate a color for each bin, while line and area charts can use a gradient across the visible value range.

See Color Stops for reusable color definitions and transition modes.

Related documentation¶

• Sparkline History Periods and Bins
• Sparkline Cartesian Charts and Axes
• Day and Night
• Sparkline Specialized Charts
• Entity Definitions
• Color Stops