Sparkline Cartesian charts and automatic axes¶

Line, area, dots, and bar charts display time along the horizontal axis and sensor values along the vertical axis. Start by choosing the history period and number of bins, then select how those bins should appear. The card automatically determines suitable scales, grid lines, tick marks, and labels based on the graph size and the values currently in view.

The X-axis follows the selected history period:

• A rolling window moves forward with the available bins.
• A current calendar period covers the full calendar range while the graph fills up to the current bin.
• Local midnight appears as a date, while other ticks use an appropriate local time format.

Move the pointer or a finger across a supported chart to inspect the nearest time interval. The tooltip shows the date or time together with the formatted minimum, average, and maximum values.

Line chart¶

Basic usage¶

A line chart connects sensor values over time. It is well suited to showing trends while keeping changes in direction easy to recognize.

1
2
3
4
5
6
7

sparkline:
  state_values:
    aggregate_func: avg
    smoothing: true
  show:
    chart_type: line
    line: true

Enable points to mark the individual values along the line:

1
2
3
4
5

sparkline:
  show:
    chart_type: line
    line: true
    points: true

Configuration fields¶

Styling¶

Use line.styles to adjust the appearance of the line:

1
2
3
4
5
6
7

line:
  styles:
    - fill: none
    - stroke: var(--primary-color)
    - stroke-width: 1
    - stroke-linecap: round
    - stroke-linejoin: round

Point size and appearance can be adjusted with the applicable point or dot settings.

Period support¶

Axes, grid, labels, and tooltip¶

Area chart¶

Basic usage¶

An area chart displays sensor history as a filled graph. Use it when the size and direction of changes should stand out more clearly than they would with a line alone.

Area Day Chart	Area Week Chart with min/max values

1
2
3
4
5
6
7
8
9

sparkline:
  state_values:
    aggregate_func: avg
    smoothing: true
  show:
    chart_type: area
    line: true
    area: true
    fill: fade

Line and area charts can also display the lowest and highest values for each time interval. The automatic Y-axis expands as needed to keep the full visible range inside the graph.

Configuration fields¶

Styling¶

Use area.styles to control the fill color and opacity:

1
2
3
4

area:
  styles:
    - fill: var(--primary-color)
    - opacity: 0.25

fill: fade adds a vertical opacity transition. When the Y range crosses zero, the positive and negative areas are handled separately.

Period support¶

Axes, grid, labels, and tooltip¶

Dots chart¶

Basic usage¶

A dots chart displays each value as a separate point. It is useful for spotting changes and outliers without connecting the values with a line.

Dots chart

1
2
3
4
5

sparkline:
  state_values:
    aggregate_func: avg
  show:
    chart_type: dots

Use show.points when points should be added to a line or area chart instead of shown as a standalone dots chart.

Configuration fields¶

Styling¶

Use line_color for a fixed color, or configure color_stops to color each dot according to its value.

Period support¶

Axes, grid, labels, and tooltip¶

Bar chart¶

Basic usage¶

A bar chart displays sensor values as separate vertical bars. A larger number of time intervals produces narrower bars, while fewer intervals result in wider bars.

Bar chart

1
2
3
4
5
6
7

sparkline:
  state_values:
    aggregate_func: avg
  show:
    chart_type: bar
  bar:
    column_spacing: 1

When the selected history contains negative values, bars can extend both above and below zero.

Configuration fields¶

Styling¶

Bar colors can come from the configured line colors, the entity color, or color stops. Use bar.styles to further adjust their appearance.

Period support¶

Axes, grid, labels, and tooltip¶

Showing the grid, axes, tick marks, and labels¶

Use show to choose which automatically calculated display elements are visible:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

sparkline:
  show:
    grid:
      x: true
      y: true
    axis:
      x: true
      y: true
    tickmarks:
      x: true
      y: true
    labels:
      x: true
      y: true

Grid divisions, tick positions, and label placement adjust automatically to the chart. Existing configurations that use a boolean value, such as axis: true, continue to display both supported axes.

Logarithmic Y-axis¶

Set state_values.logarithmic: true when the meaningful variation in your data spans several orders of magnitude. This changes only the vertical value scale; the horizontal time scale remains the same.

Logarithmic mode works best with a suitable value range. Check the result with the intended sensor before using it as a default across a dashboard.

Tooltip styling¶

Configure the tooltip appearance under tooltip.styles:

1
2
3
4

sparkline:
  tooltip:
    styles:
      - font-size: 0.65em

Related documentation¶

• Sparkline Graphs
• Sparkline History Periods and Bins
• Sparkline Specialized Charts
• CSS Styling