Sparkline Cartesian charts and automatic axes¶

Line, area, dots, and bar charts show time horizontally and sensor values vertically. Select the history period and number of bins first, and then choose how those bins should be displayed. The scale, grid, ticks, and labels are selected automatically for the configured graph size and visible values.

The Y-axis follows the values that are visible in the selected chart. Increasing the number of bins can expose shorter peaks and may therefore produce a different Y range. A nearly constant series receives a finer scale, while sudden peaks or dips expand the range.

The X-axis follows the configured period:

• A rolling window moves with the available bins.
• A current calendar period covers the complete calendar range while the graph grows up to the current bin.
• Local midnight is shown as a date; other ticks use the 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 and the formatted minimum, average, and maximum values.

Line chart¶

Basic usage¶

A line chart connects sensor values over time. Use it to show trends while keeping changes in direction easy to see.

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 change the line appearance:

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 configured with the applicable point or dot settings.

Axes, grid, labels, and tooltip¶

Area chart¶

Basic usage¶

An area chart shows sensor history as a filled graph. Use it when the size and direction of changes should stand out more clearly than 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 show the lowest and highest values in each time interval. The automatic Y-axis adjusts to keep the complete visible range inside the graph.

Configuration fields¶

Styling¶

Use area.styles for the fill color and opacity:

1
2
3
4

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

fill: fade applies a vertical opacity transition. Positive and negative parts are handled independently when the Y range crosses zero.

Axes, grid, labels, and tooltip¶

Dots chart¶

Basic usage¶

A dots chart shows individual values as separate points. Use it to see 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 displayed as a standalone dots chart.

Configuration fields¶

Styling¶

Use line_color to set a fixed color, or use color_stops to color each dot according to its value.

Axes, grid, labels, and tooltip¶

Bar chart¶

Basic usage¶

A bar chart shows sensor values as separate vertical bars. More time intervals produce narrower bars; fewer intervals produce 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

Bars can extend above or below zero when the selected history contains negative values.

Configuration fields¶

Styling¶

Bar colors can use the configured line colors, entity color, or color stops. Use bar.styles to change the appearance of the bars.

Axes, grid, labels, and tooltip¶

Showing grid, axes, tickmarks and labels¶

Use show to select 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 positions adjust automatically. Existing configurations that use a boolean, such as axis: true, continue to show both supported axes.

Logarithmic Y-axis¶

Set state_values.logarithmic: true for data whose useful variation spans multiple orders of magnitude. This changes the vertical value scale; the horizontal time scale remains unchanged.

Use logarithmic mode only with a suitable value range and verify the resulting graph with the target sensor before using it as a dashboard default.

Tooltip styling¶

Configure the tooltip presentation 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