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.item_style string No auto Chooses a fixed color, one color from the current state, or a gradient across the graph.
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.
area.color_filter mapping No Not set Adjusts the selected area color.
area.minmax.color_filter mapping No Not set Adjusts the min/max color independently from the area.
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
4
sparkline:
  area:
    show:
      minmax: true

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

Choose the area color

Keep the area at one configured color with fixed:

1
2
3
4
5
6
7
sparkline:
  show:
    chart_type: area
    item_style: fixed
  area:
    styles:
      fill: steelblue

Use colorstop or colorstopinterpolated when the complete area should follow the current entity state. Use colorstopgradient when the colors should follow the complete vertical value range.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
sparkline:
  show:
    chart_type: area
    item_style: colorstopgradient
  color_stops:
    colors:
      - value: 0
        color: green
      - value: 50
        color: orange
      - value: 100
        color: red

The area fill and its optional minimum-to-maximum range use the same selected color. A visible line uses its corresponding line paint. See Color stops.

Use area.color_filter to adjust the complete area color. Add area.minmax.color_filter when its minimum-to-maximum range needs a separate adjustment:

1
2
3
4
5
6
area:
  color_filter:
    brightness: 1.2
  minmax:
    color_filter:
      brightness: 0.7

The area and min/max filters are independent. Filtering the area does not change the min/max range.

See Color filters for all available adjustments.