Card_mod for air quality sensor (AQI) colors

[Falkyn]

I had a terrible time figuring out how to get the gauge component to display the six colors indicating the various air quality ranges (as described by airnow). Now that I have it working using card_mod, I thought I’d share the configuration so others can benefit. I’m also interested if others have stumbled on better configurations; if you have a configuration for this data please share!

I’m using this card with the airnow integration, but it should work with any air quality integration that provides an AQI number in a sensor entity.

image:

yaml:

type: gauge
entity: sensor.airnow_aqi
min: 0
max: 300
name: AQI
unit: ' '
card_mod:
  style:
    ha-gauge$: |
      .value {
        --gauge-color:
          {% if states.sensor.airnow_aqi.state | int < 51 %}
            #00e400
          {% elif states.sensor.airnow_aqi.state | int < 101 %}
            #ffff00
          {% elif states.sensor.airnow_aqi.state | int < 151 %}
            #ff7e00
          {% elif states.sensor.airnow_aqi.state | int < 201 %}
            #ff0000
          {% elif states.sensor.airnow_aqi.state | int < 301 %}
            #8f3f97
          {% else %}
            #7e0023
          {% endif %};
      }

[GlennHA (Glenn)]

Scroll thru this:
https://community.home-assistant.io/t/purpleair-air-quality-sensor/146588
or for exactly what I do:
https://github.com/GlennGoddard/CanvasGaugeBackgrounds

[fizz]

I know this is an old thread, but I found it while searching for this solution.

Another option is to just use segment colors in the standard gauge card. You don’t need card-mod for this. Also I don’t think your colors are quite right, per the AirNow documentation.

Here is what I came up with:

And my code:

type: gauge
entity: sensor.airnow_aqi
name: Airnow AQI
unit: ' '
needle: true
min: 20
max: 500
segments:
  - from: 0
    color: '#00e400'
  - from: 51
    color: '#ffff00'
  - from: 101
    color: '#ff7e00'
  - from: 151
    color: '#ff0000'
  - from: 201
    color: '#8f3f97'
  - from: 301
    color: '#800000'

[mxc77 (Mike)]

Old thread, but @fizz’s solution was the easiest and most customizable for me.

[woolf0007]

Thx, great job…