Lovelace: mini graph card

Is there any way to have the mini-graph-card make the lines of the graph smaller? I’ve got a graph full-screened in panel mode showing the various temperatures of every room in my house, but the lines are way too big as you can see. Is there any way to make the lines thinner? The graph is quite unreadable like this.

It’s in the docs.

1 Like

Im about to tighten up the spaces myself. Will let you know if I come across something similar.

1 Like

2022-04-02_17-11

I managed to get more or less what I was going for with layout.

Here’s what I added to each mini-graph-card:

      style: |
        ha-card .header.flex .name.flex {
          font-size: 16px;
        }
        ha-card .states.flex .state .state__value.ellipsis {
          font-size: 20px;
          align-self: center;
        }
        ha-card .states.flex .state .state__uom.ellipsis {
          font-size: 15px;
          align-self: center;
        }
        ha-card .header.flex {
          padding: 0px;
        }
        ha-card.flex {
          max-height: 100px !important;
          padding: 0px;
        }
        ha-card .states.flex {
          padding: 0px;
        }
        ha-card .graph.flex {
          margin: 0px;
          padding: 0px;
        }

The grid card header required adding the custom:mod-card, so, at the top, like this…

type: custom:mod-card
card:
  type: grid
  columns: 2
  square: false
  title: Basement Air Quality
  cards:
    - type: custom:mini-graph-card

and at the bottom, under the mini graph cards, like this:

card_mod:
  style:
    hui-grid-card:
      $: |
        .card-header {
          width: max-content;
          margin: 0 auto;
          padding: 1px !important;
        }

Can someone tell me why I get so many console errors with this card please?

      - type: custom:mini-graph-card
        name: Downstairs vs Upstairs vs Loft vs Outside
        entities:
          - entity: sensor.downstairs_mean_temperature
            name: Downstairs (mean)
            color: IndianRed
          - entity: sensor.upstairs_mean_temperature
            name: Upstairs (mean)
            color: SteelBlue
          - entity: sensor.loft_temperature
            name: Loft
            color: GreenYellow
          - entity: sensor.weather_current_temperature
            name: Outside
            color: DimGrey
          - entity: binary_sensor.above_horizon
            name: Night
            y_axis: secondary
            color: black
            show_fill: true
            show_line: false
            show_points: false
        line_width: 1
        points_per_hour: 4
        aggregate_func: min
        show:
          legend: false
          name: false
          state: false
          labels: true
          labels_secondary: false
          icon: false
        state_map:
          - value: 'on'
            label: 'Day'
          - value: 'off'
            label: 'Night'

image

image

Many entities + one binary_sensor (on,off).
You have specified a state_map for the binary_sensor but this option is GLOBAL.
Since other entities have different values (like 2.34, 4.45, …) this error comes.
There is a FR for “state_map for every entity” (see in GitHub).

Alternatively do not use binary_sensor for “night”.
Explained here.

1 Like

Great card, thx for sharing!
My question: how to change font of value? Or at least bold whole value with unit?
I’m trying with following code (font family is configured and works inside other card):

          style: |
            ha-card .states.flex .state .state__value.ellipsis {
              font-weight: bold;
              font-family: 7-segment;
            }

But result is negative. Font is ignored, and only value is bolded, not unit.
image

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.

Prefixes / suffixes for data:

image

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

For several entities:

изображение

code
type: custom:mini-graph-card
entities:
  - entity: sensor.xiaomi_cg_1_temperature
  - entity: sensor.xiaomi_cg_1_co2
    show_state: true
    y_axis: secondary
show:
  name: false
  icon: false
  labels: true
  labels_secondary: true
style: |
  .states.flex > .state .state__value.ellipsis::before {
    content: "v_1 ";
    color: orange;
  }
  .states.flex > .state .state__uom.ellipsis::before {
    content: "u_1 ";
    color: cyan;
  }
  .states.flex > .states--secondary .state .state__value.ellipsis::before {
    content: "v_2 ";
    color: red;
  }
  .states.flex > .states--secondary .state .state__uom.ellipsis::before {
    content: "u_2 ";
    color: lightgreen;
  }
  .graph .graph__container .graph__labels.--primary .label--max::before {
    content: "MAX_1 ";
    color: red;
  }
  .graph .graph__container .graph__labels.--primary .label--min::before {
    content: "MIN_1 ";
    color: red;
  }

  .graph .graph__container .graph__labels.--secondary .label--max::before {
    content: "MAX_2 ";
    color: cyan;
  }
  .graph .graph__container .graph__labels.--secondary .label--min::before {
    content: "MIN_2 ";
    color: cyan;
  }

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