Skip to content

Line chart

A line chart shows how a numeric value changes over time without filling the area below it.

Use it for a clear continuous trend. Its light visual weight also makes several series easier to compare in the same graph.

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-line
      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
          smoothing: true
        show:
          chart_type: line
        line:
          line_width: 1.5

Configuration options

Option Type Required Default Description
show.chart_type string No line Displays a line chart.
show.item_style string No auto Chooses a fixed color, one color from the current state, or a gradient across the graph.
line.line_width number No 1 Sets the width of the line.
line.color_filter mapping No Not set Adjusts the selected line color.
line.styles mapping No default line styles Applies styles such as opacity or a dashed stroke.
line.show.minmax boolean No false Shows the lowest and highest values measured within every interval.
line.minmax.color_filter mapping No Not set Adjusts the min/max color independently from the line.
line.minmax.styles mapping No line color with 0.25 opacity Styles the minimum-to-maximum band without changing the line.
state_values.smoothing boolean No true Uses smooth or straight connections.
show.points boolean No false Adds a point for every displayed interval.
dots.radius number No 2 Sets the radius of optional points.
series[].color color No automatic palette Gives each series a recognizable fixed color.

Basic line chart

1
2
3
4
5
6
sparkline:
  show:
    chart_type: line

  line:
    line_width: 1.5

Show variation within each interval

The line normally shows one aggregated value for every interval. Add a minimum-to-maximum band when the variation within those intervals should remain visible.

1
2
3
4
5
6
7
8
9
sparkline:
  line:
    show:
      minmax: true
    styles:
      stroke: red
    minmax:
      styles:
        opacity: 0.2

The band uses the line color. Its opacity can be changed independently without making the line less visible.

Choose the line color

Keep a line at one configured color with fixed:

1
2
3
4
5
6
7
sparkline:
  show:
    chart_type: line
    item_style: fixed
  line:
    styles:
      stroke: red

Color stops offer three other choices:

Item style Result
colorstop Uses one matching color for the current entity state.
colorstopinterpolated Uses one blended color for the current entity state.
colorstopgradient Distributes the configured colors across the complete value range. 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
sparkline:
  show:
    chart_type: line
    item_style: colorstopinterpolated
  color_stops:
    colors:
      - value: 0
        color: green
      - value: 50
        color: orange
      - value: 100
        color: red

The line and its min/max band can use different colors. This keeps the current range visible while a fixed line remains easy to recognize:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
sparkline:
  show:
    chart_type: line
  color_stops:
    template:
      name: fhs_colorstops_cpu_load
  line:
    show:
      item_style: fixed
      minmax: true
    styles:
      stroke: white
      opacity: 0.8
    minmax:
      show:
        item_style: colorstopinterpolated
      styles:
        opacity: 0.15

A color filter can make the line or its min/max band lighter, darker, less saturated, or otherwise adjust the selected color:

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

The line and min/max filters are independent. Filtering the line does not change the min/max band. See Color filters for all available adjustments.

See Color stops for reusable palettes and scales.

Smooth or straight connections

1
2
3
sparkline:
  state_values:
    smoothing: true

Disable smoothing when every change should use a straight connection.

Add points

1
2
3
4
5
6
7
sparkline:
  show:
    chart_type: line
    points: true

  dots:
    radius: 1