Sparkline specialized charts¶

Specialized charts offer different ways to display historical data without using a conventional line or area chart. Equalizer and graded charts highlight numeric levels, state bands show how named states change over time, and barcode charts use color to make changes in value easy to recognize.

Shared color behavior¶

Specialized charts can calculate a separate color for each displayed bin or level. Use colorstops_transition to choose between clearly defined color thresholds and smooth transitions between the configured colors.

 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 configurable number of levels. For each time bin, it highlights the levels that correspond to the recorded value.

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. When color stops are calculated per bin, the chart can communicate both the value and its threshold state at a glance.

Period support¶

Axes, grid, labels, and tooltip¶

Graded chart¶

Basic usage¶

A graded chart assigns each bin value to one of the ranks defined by its color stops. This is useful when the category or grade matters more than the value’s exact numeric position.

1
2
3
4
5

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

Add ranks to the color-stop entries when their visual order should differ from their numeric definition order.

Configuration fields¶

Styling¶

The ranks in the configured color stops determine which grade is shown and which color it uses. Color-stop templates are especially useful when several cards share the same grading scale.

Period support¶

Axes, grid, labels, and tooltip¶

State bands chart¶

Basic usage¶

A state bands chart places each mapped entity state on its own row. The width of a horizontal segment shows how long that state remained active. Rounded connections between rows make changes from one state to another easy to follow.

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 both the vertical row and the matching color stop. When label is omitted, the translated Home Assistant state label is used where available.

State bands always use discrete colors. Smooth interpolation between color stops does not apply to this chart type.

Configuration fields¶

Styling¶

Each foreground segment uses the color stop assigned to its mapped value. The separate background layer follows the same row colors and connects consecutive segments.

Use state_bands.styles to style the foreground segments and state_bands.background.styles to style the connected layer behind them.

Period support¶

Axes, grid, labels, and tooltip¶

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

Barcode chart¶

Basic usage¶

A barcode chart draws one narrow colored segment for each time bin. Time runs from left to right, while the color of each segment represents its value.

The examples below show several available variations. The top sparkline displays the current day using radial barcode, audio, and rice_grain visualizations. The six sparklines below it show the previous week, with the average in the center and the minimum and maximum 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 the value of its own time bin. The current entity state is therefore not applied to the entire historical barcode.

Leave chart_variant unset to display full-height segments. Use audio for centered value bars, stalactites for bars that grow downward from the top, or stalagmites for bars that grow upward from the bottom.

Configuration fields¶

Styling¶

Use barcode.styles to control the appearance of the segments. Their data-driven colors continue to come from the configured color stops.

Period support¶

Axes, grid, labels, and tooltip¶

Radial barcode chart¶

Basic usage¶

A radial barcode arranges the configured time bins around a circle. The full configured period is distributed around the ring, starting with the first bin and ending with the last.

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 an individual segment. The selected foreground segment is highlighted, while the remaining segments are dimmed relative to their configured opacity. The tooltip displays the value and time information for the selected bin.

Leave chart_viz unset for backwards-compatible default behavior. You can also set chart_viz: bar explicitly. With a fixed-width variant these form a regular ring; with a sunburst variant they become value-sized radial bars. Choose flower, flower2, or rice_grain to replace the bars with rounded shapes.

Leave chart_variant unset for backwards-compatible behavior. You can also set chart_variant: fixed explicitly for a fixed-width ring. Use sunburst, sunburst_centered, sunburst_outward, or sunburst_inward when each segment’s radial size should represent its value.

Configuration fields¶

Styling¶

Use foreground.styles for the colored data segments and background.styles for the reference ring behind them.

During interaction, the foreground emphasis changes temporarily to highlight the selected segment. Once the interaction ends, the configured styles are restored.

Each foreground segment receives its color from the color stops, based on that segment’s own bin value.

Period support¶

Axes, grid, labels, and tooltip¶

Related documentation¶

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