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.
line.line_width number No 1 Sets the width of the line.
line.styles mapping No default line styles Applies styles such as opacity or a dashed stroke.
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

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