Sparkline specialized charts¶

Specialized charts present history without a conventional line or area. Equalizer and graded charts emphasize numeric levels, state bands show how named states change over time, and barcode charts emphasize value changes through color.

Shared color behavior¶

Specialized charts can calculate a color for every displayed bin or level. colorstops_transition controls whether the transition between configured colors is hard or smoothly interpolated.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

sparkline:
  colorstops_transition: smooth
  color_stops:
    colors:
      - value: 0
        color: '#49ce4b'
      - value: 50
        color: '#fed125'
      - value: 100
        color: '#e9343d'

See Color Stops for reusable color-stop templates and threshold definitions.

Equalizer chart¶

Basic usage¶

An equalizer divides the visible Y range into a configured number of levels and renders the active levels for every time bin.

Equalizer chart

1
2
3
4
5
6

sparkline:
  show:
    chart_type: equalizer
  equalizer:
    value_buckets: 10
    square: false

Configuration fields¶

Styling¶

Equalizer levels use the configured entity color, line colors, or color stops. Per-bin color stops allow the levels to communicate both magnitude and threshold state.

Axes, grid, labels, and tooltip¶

Graded chart¶

Basic usage¶

A graded chart converts every bin value into one of the ranks defined by its color stops. It is useful when the meaning of the grade is more important than the exact numeric position.

1
2
3
4
5

sparkline:
  show:
    chart_type: graded
  graded:
    square: false

Define ranks in the color-stop entries when their visual order differs from their numeric definition order.

Configuration fields¶

Styling¶

The configured color-stop ranks determine the visible grade and its color. Use color-stop templates when multiple cards share the same grading scale.

Axes, grid, labels, and tooltip¶

State bands chart¶

Basic usage¶

A state bands chart displays every mapped entity state on its own row. The horizontal length of a segment shows how long that state remained active. Rounded connections make the transition flow between rows easily visible.

State bands chart

 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
27
28
29
30
31
32
33
34
35
36
37
38
39

sparkline:
  show:
    chart_type: state_bands
    grid:
      x: true
      y: true
    axis:
      x: true
      y: true
    labels:
      x: true
      y: true

  state_map:
    type: state_value
    map:
      - state: low
        value: 0
        label: Low
      - state: moderate
        value: 1
        label: Moderate
      - state: high
        value: 2
        label: High
      - state: very_high
        value: 3
        label: Very high

  color_stops:
    colors:
      - value: 0
        color: lightgray
      - value: 1
        color: '#f1c40f'
      - value: 2
        color: '#e67e22'
      - value: 3
        color: '#e74c3c'

The value determines the vertical row and selects the matching color stop. Omit label to use the translated Home Assistant state label where one is available. State bands always use discrete colors; smooth color interpolation does not apply.

Configuration fields¶

Styling¶

The foreground uses the color stop assigned to each mapped value. The separate background follows the same row colors and connects consecutive segments. Use state_bands.styles for the foreground and state_bands.background.styles for the connected layer behind it.

Axes, grid, labels, and tooltip¶

Move the pointer or a finger across the graph to inspect a state period. The indicator snaps to the center of the active segment, while the tooltip shows its state, start, end, and duration.

Barcode chart¶

Basic usage¶

A barcode renders one narrow colored segment for every time bin. Time runs from left to right, while the value is communicated by the color of each segment.

Below some of the variations. The top sparkline shows the current day with a radial barcode / audio / rice_grain visualization. The bottom 6 sparklines show the past week with their average (center) and min/max values at the bottom.

Barcode	Barcode - Audio variant

Barcode - Stalactites variant	Barcode - Stalagmites variant

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

sparkline:
  show:
    chart_type: barcode
    chart_variant: audio
  colorstops_transition: smooth
  color_stops:
    colors:
      - value: 0
        color: '#3498db'
      - value: 50
        color: '#2ecc71'
      - value: 100
        color: '#e74c3c'

Each segment uses its own bin value. The current entity state is not applied to the complete historical barcode.

Omit chart_variant for full-height segments. Use audio for centered value bars, stalactites for bars growing down from the top, or stalagmites for bars growing up from the bottom.

Configuration fields¶

Styling¶

Use barcode.styles for the segment presentation. Color stops remain responsible for the data-driven color of each bin.

Axes, grid, labels, and tooltip¶

Radial barcode chart¶

Basic usage¶

A radial barcode arranges the configured time bins around a circle. The complete configured period occupies the full ring from the first bin through the last bin.

Radial Barcode chart - Sunburst variant - flower viz

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

sparkline:
  show:
    chart_type: radial_barcode
    chart_variant: sunburst
    chart_viz: flower

  radial_barcode:
    size: 5
    line_width: 0
    background:
      styles:
        - opacity: 0.15
    foreground:
      styles:
        - opacity: 1
    face:
      show_hour_marks: true
      hour_marks_count: 24

Move the pointer or a finger over the ring to inspect a segment. The active foreground segment is emphasized, the other foreground segments are dimmed relative to their configured opacity, and the tooltip shows the selected bin.

Omit chart_viz for regular ring segments. Use flower, flower2, or rice_grain to change the segment shape.

Omit chart_variant for a fixed-width ring. Use sunburst, sunburst_centered, sunburst_outward, or sunburst_inward to let each segment's radial size represent its value.

Configuration fields¶

Styling¶

Use foreground.styles for the colored data segments and background.styles for the reference ring behind them. Interaction changes the foreground emphasis temporarily and restores the configured styles when interaction ends.

Color stops calculate the color of every foreground segment from that segment's own bin value.

Axes, grid, labels, and tooltip¶

Related documentation¶

• Sparkline Graphs
• Sparkline History Periods and Bins
• Sparkline Cartesian Charts and Axes
• Color Stops
• CSS Styling