Lovelace: mini graph card

Share your Projects! Dashboards & Frontend
2047

I thought about it at first. however, even putting the css there, and it appearing in the page code, has no effect on the styles.
I dont know, but the style should be first on the code, right? the card_mod is putting after the code of the card itself:

image
image1571×434 26.4 KB

The code with the card_mod custom:

          - type: custom:mini-graph-card
            entities:
              - sensor.mikrotik_ether1_tx
              - sensor.mikrotik_ether1_rx
            name: Upload Link 1 
            line_color: var(--state-icon-active-color)
            hours_to_show: 1
            points_per_hour: 10
            show:
              legend: false
            card_mod:
                  style: |
                    .graph__labels {
                      top: -30px;
                      }
2048

This doesn’t have anything to do with the mini graph card directly.

Seek help here:
:small_blue_diamond: Card-mod - Super-charge your themes! - Share your Projects! / Themes - Home Assistant Community (home-assistant.io)
:small_blue_diamond: Card-mod - Add css styles to any lovelace card - Share your Projects! / Lovelace & Frontend - Home Assistant Community (home-assistant.io)

Anyway, try:

            card_mod:
                  style: |
                    .graph__labels {
                      top: -30px !important;
                      }
1 Like
2049

Thanks man, the !important flag solve the problem. Thank you!

1 Like
2050

Anyone advise how I could move the humidity text just underneath the temperature? I have seven MGC in a row and there is not enough space to have the temp and humidity side by side because of the screen ratio of my main tablet.

image

type: custom:mini-graph-card
entities:
  - sensor.temperature_xiaomi_rumpus
show:
  labels: false
style: |
  ha-card .states.flex::after {
    color: orange;
    content: "Humidity: {{states('sensor.humidity_xiaomi_rumpus')}}%";
    white-space: pre;
    background-color: rgba(50,50,50,0.4);
    padding: 15px 15px 15px 15px;
    border-radius: 5px;
  }

I’d like to do something like this:

image

2051

Scroll two posts up and check those links.

2052 
  - type: custom:mini-graph-card
    entities:
      - sensor.cleargrass_1_temperature
    show:
      labels: true
    style: |
      .states.flex {
        flex-direction: column;
      }
      .states.flex::after {
        color: blue;
        content: "Humidity: {{states('sensor.cleargrass_1_humidity')}} %";
      }

изображение

Examples here (scroll down for mini-graph-card):
post

2 Likes
2053

Gee Whiz! That is freak’n awesome, thank you. Would have never figured that out on my own. :+1:

2054

is there a way to filter out entities? i have some probes that are used now and then and want to filter them out when they are unavailable or unplugged so i dont have to update the config

2055

mini-graph-card + auto-entities

2056

Is there a way to add binary switches with analogue values? I want to show when the switch to my air purifier turns on, and then have the air gas reading on the same graph. Is it possible?

2057

Same as for day/night background graph.

2058

Sorry wrong thread…

2059

The post should be placed in another thread

2060

Can someone please explain how the ‘fixed_value’ setting works? From the description, it sounds like it should just use an entity’s current state rather than looking at its history. I can’t seem to get it to work that way.

My situation is this: I’m using the Dark Sky weather integration (sensor version) which give me lots of individual sensors for rain probability by hour e.g. sensor.precip_probability_1h, sensor.precip_probability_2h, sensor.precip_probability_3h, etc…

I’m trying to graph these as a bar graph, and also exclude these sensors from the recorder (I really don’t need to save any history for these). But it only seems to work if I do enable recording of the sensors. I thought using ‘fixed_value: true’ would allow me to exclude recording of these sensors.

2061

According to the source code:

    if (this.config.entities[index].fixed_value === true) {
      const last = stateHistory[stateHistory.length - 1];
      this.Graph[index].history = [last, last];
    } else {
      this.Graph[index].history = stateHistory;
    }

for this sensor only the LAST value is used to build a graph, the values are taken from DB.

2062

Thanks. So in this case I would still need to record the history for these sensors since the card does look in stateHistory?

2063

Seems to be so.
AFAIK the card always work with a DB.

2064

I cannot seem to figure out how to get the vales beside the names like this

image

My code

type: custom:mini-graph-card
name: BBQ Meat Temps
icon: mdi:grill
hours_to_show: 10
entities:
  - entity: sensor.meat_probe_1
    name: Probe 1
    show_state: true
    color: red
    state_adaptive_color: true
  - entity: sensor.meat_probe_2
    name: Probe 2
    show_state: true
    color: green
    state_adaptive_color: true
show:
  name: true
  points: false
  icon: true
  state: true
  labels: false
card_mod: null
style: |
  .graph__legend__item:nth-of-type(1) .ellipsis:after {
    content: ": {{states('sensor.meat_probe_1')}} ppm";
  }
  .graph__legend__item:nth-of-type(2) .ellipsis:after {
    content: ": {{states('sensor.meat_probe_2')}} ppm";
  }

results in this ?
Thanks,
Grey

image

2065

This is a card-mod style.
Do you have the card-mod installed?
The styles are not supposed to be used by “simple copy/paste” method - using them needs understanding them. Otherwise in some cases you will not get an expected result (((.

Some card-mod examples in this thread are provided w/o using the “card_mod” keyword.
Starting from card-mod 3.0 the “card_mod” keyword is advised to be used before the “style” keyword:

card_mod:
  style:
    .....

In fact, many styles continue to work w/o using the “card_mod” keyword, but in some cards/places it will not work any more unless you use a proper “3.0” syntax.

2066

LOL I never will understand Lambda or .graph__legend__item:nth-of-type(2) .ellipsis:after {
content: “: {{states(‘sensor.meat_probe_2’)}} °F”;
}

But I found your Mod Thanks,
Grey

But there is still no way to get y-axis values on the left like between 60 and 220 is there?

image

image
image694×453 14.9 KB