Skip to content

Graded chart

A graded chart divides numeric history into ordered color bands. Use it when threshold ranges, such as an Awair score from poor to excellent, matter more than an exact numeric height.

Flexible Horseshoe graded chart with ordered air-quality levels

Basic configuration

This example displays Awair score ranges over time:

 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
layout:
  sparklines:
    - id: awair-score
      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:
        show:
          chart_type: graded
        graded:
          square: false
        color_stops:
          colors:
            - value: 0
              color: "#d32f2f"
            - value: 50
              color: "#ed8003"
            - value: 70
              color: "#f9a825"
            - value: 90
              color: "#66bb6a"

Configuration options

Option Type Required Default Description
show.chart_type string No line Set to graded to display ordered value ranges.
graded.square boolean No false Uses square or rounded grade shapes.
color_stops.colors[].value number Yes - Sets the lower bound of a value range.
color_stops.colors[].color color Yes - Chooses the visible color for that state.
bins.per_hour number or auto No auto Chooses how much history each displayed grade represents.

Keep automatic bins

Leave bins.per_hour set to auto for normal use. Adjust bins.density when you want more or less detail without fixing the interval yourself.

Basic graded chart

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
sparkline:
  show:
    chart_type: graded

  graded:
    square: false

  color_stops:
    colors:
      - value: 0
        color: "#d32f2f"
      - value: 50
        color: "#ed8003"
      - value: 70
        color: "#f9a825"
      - value: 90
        color: "#66bb6a"

Each value starts a new grade. List the values from low to high so the chart shows the ranges in the same order as the score.

When to use graded

Use a graded chart for air quality, pollen concentration, warnings, comfort levels, or another numeric scale with clear threshold ranges. Use an equalizer when the graph should represent numeric height instead.