CO2 Level Display

Hello everyone, I am looking for a way to display the CO2 level, or see how you display this level ???
I like this display from green to red
What do you use ?

Thanks

1 Like

I use this card.
Red: Danger-high CO2 concentration
Yellow: Deterioration of air - ventilate
Green: Fresh air-everything is fine
co2

visually recreating would be possible with picture elements card. Quite some work for all states, but could be very nice in the end.

Whats the name of the card?

This is the apexcharts-card

Hello Pepe59 how to set the color background ? I have the color area but not background ?
image

1 Like

You can try it like this. It’s been a long time since I’ve set up a card.

  annotations:
    position: back
    yaxis:
      - 'y': 0
        y2: 2500
        fillColor: '#ADFF2F'

Thanks! for the card name.

https://github.com/ucl-casa-ce/Open-Gauges/blob/2fd6fbbc3c6c82c99ff30c47e9b43cf975c3dacd/Graphics%20Files/CO2GaugeColour.png
A more physical option.

How did you code this? I’m guessing using ApexCharts but can you share your code please!

I know it’s an old thread. But for anyone else interested:

I used ApexCharts with this config:

type: custom:apexcharts-card
header:
  show: true
  show_states: true
  colorize_states: true
graph_span: 24h
yaxis:
  - min: ~200
    max: ~1200
apex_config:
  chart:
    height: 300px
  grid:
    show: true
  annotations:
    yaxis:
      - "y": 600
        y2: 0
        borderColor: transparent
        fillColor: rgba(0, 128, 0, 0.5)
        label:
          text: Good
          position: right
          style:
            color: "#ffffff"
            background: "#008000"
      - "y": 1000
        y2: 600
        borderColor: transparent
        fillColor: rgba(153, 101, 21, 0.5)
        label:
          text: Medium
          position: right
          style:
            color: "#ffffff"
            background: "#996515"
      - "y": 3000
        y2: 1000
        borderColor: transparent
        fillColor: rgba(153, 0, 0, 0.5)
        label:
          text: High
          position: right
          style:
            color: "#ffffff"
            background: "#990000"
series:
  - entity: sensor.meter_f213_carbon_dioxide
    name: Concentration CO₂
    type: line
    color: "#ff9900"
    stroke_width: 2
    show:
      legend_value: true
      in_header: true