Lovelace: mini graph card

Share your Projects! Dashboards & Frontend
1733

How to display an additional info on the card:
image

code 
type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
card_mod:
  style: |
    .states.flex::after {
      color: blue;
      content: "Humidity: {{states('sensor.cleargrass_1_humidity')}} % \A CO2: {{states('sensor.cleargrass_1_co2')}} ppm";
      white-space: pre;
      background-color: rgba(50,50,50,0.1);
      padding: 5px 5px 5px 5px;
      border-radius: 5px;
    }

Another case is here:
изображение

In case of several entities:
there are 2 diff ways:

изображение
изображение473×517 30.2 KB

code 
type: vertical-stack
cards:
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.xiaomi_cg_1_temperature
      - entity: sensor.xiaomi_cg_2_temperature
        show_state: true
    show:
      labels: true
    card_mod:
      style: |
        .states.flex > .state::after {
          content: "{{states('sun.sun')}}";
          margin-left: 70px;        
        }

  - type: custom:mini-graph-card
    entities:
      - entity: sensor.xiaomi_cg_1_temperature
      - entity: sensor.xiaomi_cg_2_temperature
        show_state: true
    show:
      labels: true
    card_mod:
      style: |
        .states.flex > .state::after {
          content: "{{states('sun.sun')}}";
          margin-right: 20px;        
        }
        .states.flex > :first-child {
          width: 66.66%;
        }
        .states.flex > :last-child {
          width: 33.33%;
          margin-left: 0px;
        }

Find more card-mod examples.

2 Likes