Lovelace: mini graph card

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:

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;
                      }

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

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

1 Like

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

Scroll two posts up and check those links.

  - 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

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

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

mini-graph-card + auto-entities

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?

Same as for day/night background graph.

Sorry wrong thread…

The post should be placed in another thread

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.

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.

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

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

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

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.

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