Skip to content

Area chart

An area chart combines a trend line with a filled area. Use it when the magnitude of the value should have more visual weight.

It works well for temperature, humidity, power, air quality, and other continuous measurements where both direction and magnitude should be immediately visible.

Flexible Horseshoe sparkline area example

See: Sparkline History Template Card #060

Basic configuration

This example shows the average value over the latest 24 hours:

 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
layout:
  sparklines:
    - id: temperature-area
      entity_index: 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
          line: true
          area: true
          fill: fade

Configuration options

Option Type Required Default Description
show.chart_type string No line Set to area to display an area chart.
show.line boolean No true Shows or hides the line along the area.
show.area boolean No false Shows or hides the filled surface.
show.fill string No solid Uses a solid fill or fade.
show.points boolean No false Adds a point for every displayed interval.
area.show_minmax boolean No false Shows the minimum-to-maximum range in every interval.
line.line_width number No 1 Sets the width of the trend line.
state_values.smoothing boolean No true Uses smooth or straight connections.

Basic area chart

1
2
3
4
5
sparkline:
  show:
    chart_type: area
    line: true
    area: true

Fade the fill

1
2
3
4
sparkline:
  show:
    chart_type: area
    fill: fade

Show the value range

1
2
3
sparkline:
  area:
    show_minmax: true

The range shows the minimum and maximum values represented by each time bin.