Lovelace: mini graph card

As it supposed to be since another CSS selector is used for UoM.
Do not try to use a code by just “copy/paste” - see if it applicable to YOUR case.
Check this.

Replace it with Courier to see if it works.
Then find out why this particular font “1-segment” is not set.

1 Like

Thank you for answer, both my issues already fixed.

Two other questions if you no mind:

  1. is there any method to add any, even symbolical scale on X axis? Or even short text info, how long time is shown (hours_to_show)? I know, that would obscure the simple look of the entire card, but if it is possible by any easy way, I’d like to try, how it looks.

  2. How to move down the current value, to have it in one line with min and max values?
    I decided to show only graph (title I have on other place, so doesn’t make a sense to double it)

image

I’m trying by own but with results as below. I’m able to move value, but not the unit. Why?

For the same reason that Ildar explained in his previous answer:

(To be clear, UoM = Unit of Measurement). In other words, you will need to identify the CSS selector for the UoM, and apply the same card-mod code to it

yes, and there is a section for this UoM. Bold in this section works, my “W” is bolded. Positioning, exactly the same as in section “value” doesn’t work. Why?
Maybe more clear view, code (borders added only to show that these sections works:

            ha-card .states.flex .state .state__value.ellipsis {
              font-weight: bold;
              font-family: Arial;
              position: relative;
              top: 70px;
              border: 3px solid green;
            }
            ha-card .states.flex .state .state__uom.ellipsis{
              font-weight: bold;
              color: black
              position: relative;
              top: 70px;
              border: 3px solid green;
            }

And result:
image

Your reply made me look much closer at the CSS here - ultimately, what you are trying to do is overlap 2 div elements, one which contains the state value and UoM, and the other which contains the min and max values.

It’s a bit hacky really, but overall you might be better off applying a negative margin-top value to the min/max div, so it overlaps with the state div above it.

This works for me, but I’ve no idea how it will scale on different views and layouts:

- type: custom:mini-graph-card
  card_mod:
    style: |
      span.state__value {
        font-weight: bold;
      }
      span.state__uom.ellipsis {
        font-weight: bold;
      }
      div.info.flex {
        margin-top: -70px;
      }
  entities:
    - <your-entity-here>

Ildar, would you like to chip in here with your greater expertise?

2 Likes

Works, thanks!

image

Last question: is there any way to add prefix or any text before value?
I removed title line, but I think about something indicating that on this graph is a sum of power from three phases. So instead of just 768W, could be: “Total: 768W” or “Σ 768W”
I tried to do it with “name” moved down, but unfortunately above of “min, value, max” line is left an empty space, regardless of moving this field.

type: custom:mini-graph-card
entities:
  - sensor.cleargrass_1_temperature
show:
  labels: true
  average: true
  extrema: true
  name: false
  icon: false
style: |
  .states.flex .state .state__value.ellipsis::before {
    content: "value is ";
    color: orange;
  }
  .states.flex .state .state__uom.ellipsis::before {
    content: "unit is ";
    color: cyan;
  }
  .info.flex .info__item .info__item__type::after {
    content: " (within interval)";
    font-size: 10px;
    text-transform : none;
    color: red;
  }
  .info.flex .info__item .info__item__value::before {
    content: "value is ";
    font-size: 10px;
    color: magenta;
  }
  .info.flex .info__item:nth-child(odd) .info__item__time::before {
    content: "at ";
    color: magenta;
  }
  .graph .graph__container .graph__labels .label--max::before {
    content: "MAX ";
    color: red;
  }
  .graph .graph__container .graph__labels .label--min::before {
    content: "MIN ";
    color: red;
  }

image


Find more card-mod examples.

2 Likes

There is a way based on this method:
image
You may place the sun.sun graph UNDER the 1st graph:
image
But compare to the 1st picture - the right scale is misaligned because it is 00:14 now and the NEW date is displayed.
Check the not-hidden graph:
image
Also, a similar misalignment may occur for the left scale.
So, this is not a PERFECT way.
Check GitHub for an issue for adding X-scale.
The code:

type: custom:stack-in-card
keep:
  background: true
cards:
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.cleargrass_1_co2
        name: CO2
    hours_to_show: 48
    points_per_hour: 60
    line_width: 1
    card_mod:
      style: |
        ha-card {
          z-index: 9999;
          opacity: 1;
        }
  - type: history-graph
    entities:
      - entity: sun.sun
        name: Sun
    hours_to_show: 48
    refresh_interval: 0
    card_mod:
      style: |
        .content {
          padding-left: 0px !important;
          padding-right: 0px !important;
          padding-top: 0px !important;
        }
        ha-card {
          margin-top: -28px;
          z-index: 0;
        }

Update 24.06.22:
Due to changes in HA 2022.6 in part of history-graph, this style should be revised:

type: custom:stack-in-card
...
keep:
  outer_padding: true
  background: true
...
  - type: history-graph
    entities:
      - entity: sun.sun
        name: ' '
...
        ha-card {
          z-index: 0;
          margin-top: -31px;
          margin-right: -4px;
          margin-left: -9px;
        }

image
And result is unstable…

2 Likes

Will try tomorrow, thx!
Amazing support, really appreciate! :slight_smile: :+1:

1 Like

Same as here:
image
Any text like “for the last 48 hrs”.

@reste_narquois

Very nice mod!
Added link to the post for card-mod.

  - type: custom:mini-graph-card
    entities:
      - sensor.cleargrass_1_temperature
    align_state: center
    show:
      average: false
      extrema: true
    card_mod:
      style: |
        .info.flex {
          margin-top: -60px;
        }

image

1 Like

Thx a lot to both of you for help, finally I decided to not add X scale (too much details on card) and this is my final card for measuring home electricity :slight_smile:

image

Gents, I’d like to ask you about help for other story. I’m trying to make a card showing my current internet connection parameters. Here is my current result:

image

Left value is a current WAN RX throughput, right - ping answer to my external DNS server.
What I want to change:

  • first of all this big icon in the center, I’d like to replace it by any graphics depending on the state of WAN connection. I tried to simply relace mdi icon definition by link to my locally stored png, but it doesn’t work. So this is my first question: how to replace mdi icon by own local graphics?
  • second question: I’d like to rearrange Min and Max values: remove “min” at all, move the max value to the left and add max value from the second entity on the right - is it possible? I’m near sure that I saw somewhere here how to disable “min” value, but can’t find it now.
  • and third question connected to previous: can I modify “Max” text on card to my own description? I found how to add any text before or after this text, but not instead.

Picture elements card + inserted any other cards overlapping each other.

Find my consolidation post for card-mod in this topic.

Probably by rewriting the card.

Add a new text and hide the initial one.

Thx for help. Generally I got what I wanted to have (only Icon I left for later, with picture elements card I should be able to do it without big problems), but last question: here is my current card, I hidden extrema for second value, hidden “Min” value for first one and moved “max” to the left:

image

Question: how to align value and date to the left? They are aligned to right, because right side is their native position, in my case I’d like to change it. Tried to do it by own:

             ha-card .info.flex .info__item:nth-child(2) .info__item__value {
                text-align: left;
                color: green
            }    

but no reaction for text-align. Also I tried to put it in expected place manually by command left: 5% added into this section, but then the whole section starts to be ignored (green color disappearing, position without changes))

Try justify-xxxxxx properties for .info__item:nth-child(2)

Tried with justify-content: flex-start and justify-items: left, just no reaction.

Hi Everybody!

I could not deal with 2 things in the last some days. A tried to read everything about them but sadly without success so maybe anyone here can light me the reasons of them.

  1. I know that the official release not yet support attributes, but in theory dev version 3 of unreleased 0.11 can handle it:

    And the official manual also refer to it:

    What could be the problem of my following setup as it give me just NaN result if I’m on dev version 4 of 0.11?

    The config:
type: custom:mini-graph-card
entities:
  - entity: sensor.water_quality_fvm
    name: Water hardness
    attribute: water_hardness
font_size_header: 10
font_size: 66
hour24: true
height: 50
line_width: 1
hours_to_show: 168
show:
  labels: false

And the corresponding sensor’s state attributes:

water_quality:
  - name: Szabad aktív klór
    value: 0,20
    unit: mg/l
    limit: '1000'
    state: ok
...
  - name: pH
    value: 7,7
    unit: '&nbsp;'
    limit: '8.5'
    state: ok
location: Budapest - XI. kerület
water_hardness: közepesen kemény
provider: Data provided by vizmuvek.hu
icon: mdi:water
friendly_name: Water Quality FVM

And the result is:

  1. My second problem is about the coloring capability of sensors’s with non numerical values:
    I have a config:
type: custom:mini-graph-card
entities:
  - entity: sensor.u_s_air_pollution_level
    name: Air quality
font_size_header: 10
font_size: 66
hour24: true
height: 50
line_width: 1
hours_to_show: 168
show:
  labels: false
color_thresholds:
  - value: hazardous
    color: '#ff3d00'
  - value: very unhealthy
    color: '#ffff00'
  - value: unhealthy
    color: '#ffff00'
  - value: unhealthy for sensitive groups
    color: '#ffff00'
  - value: moderate
    color: '#ffff00'
  - value: good
    color: '#00ff00'
state_map:
  - value: hazardous
    label: Hazardous
  - value: very unhealthy
    label: Very unhealthy
  - value: unhealthy
    label: Unhealthy
  - value: unhealthy for sensitive groups
    label: Unhealthy for sensitive groups
  - value: moderate
    label: Moderate
  - value: good
    label: Good

But I simply could not get color coded states on the graph. It always shows me all the states in green (is it possible to use multiple colors?..):

Thanks for any efforts on these in advance!

Ok!

Now I’m on the hot fresh official stable 0.11.0 and figured out that for attributes I have to use state_map. With it - as the following config show - my problem solved. No think that this is the most intuitive and convenient but at least it works, so thanks for the developers.

The config:

type: custom:mini-graph-card
entities:
  - entity: sensor.water_quality_fvm
    name: Water hardness
    attribute: water_hardness
font_size_header: 10
font_size: 66
hour24: true
height: 50
line_width: 1
hours_to_show: 168
show:
  labels: false
state_map:
  - value: nagyon lágy
    label: Very soft
  - value: lágy
    label: Soft
  - value: közepesen kemény
    label: Moderately hard
  - value: kemény
    label: Hard
  - value: nagyon kemény
    label: Very hard

…and the result:

But my other problem still ‘active’, which is about the not properly used color_tresholds with the parallely used state_map.

I will drop an issue to Github about it.