Lovelace: mini graph card

There is a solution - use template sensors with different accuracy.

How can I get 3 graphs with non-opaque fill below each line, where each graph is overlaying the other? I have built this once in grafana and with this it is e.g. easy to see 1) what energy is consumed from the net, 2) what is solar-produced and self-consumed and 3) what is returned to the net.

I love mini-graph-card and tried to mimic the same. However, I get as far as what you see below and is more or less what you get out-of-the-box. It seems the fill is opaque and is mixing in with the other fills so it appears as grey where the 3 overlap. I have been playing with card-mod and tried to change the opacity for the 3 graphs but can’t get it to work.

You see it is still showing very faint colors where I would like these to be more solid.
Last I have tried is this:

style: |
  .fill--rect {
    opacity: 1.0;
  }

How can I get this to work if at all possible?

1 Like

In other words, or illustrated by a more simple example…

What I am trying to achieve is having the fill underneath the line just as red as the line itself (this is an edited screenshot):

I was thinking it was more faint because it is opaque to some degree but it seems there is more going on here…
Is it possible at all and how?

2 Likes

How do I change the proportions on the mini graph card? By default, the graph appears to be 50% the height of the card and the labels 50%.

How would I adjust it, so for example the graph took up 75% of the height of the card and the labels only 25%?

And adding x and y-axis numbering is still not possible right?

Could you provide a picture describing your needs?

Just for completeness, I finally managed to get it done through trial-and-error. Solution turns out to be fairly easy…

style: |
  .fill {
    fill: white;
    opacity: 1 !important;
  }

Graph now looks exactly how I wanted it…

Thanks!

2 Likes

Great, this is really nice styling))

2 Likes

Can you set the name: of an entity to the state (string) of another entity by using a template?

name: {{states('sensor.weight_string')}}

Works in the Template editor but not as a name in the card :frowning:

No, templates may be applied only if the card is placed inside config-template-card

1 Like

Hi!
I would like to center three entity states, but my config doesn’t want to…
I guess it’s possible regarding the issue multiple show_state · Issue #56 · kalkih/mini-graph-card · GitHub

With 2 entities with “show_state: true” it works fine, but with 3 entities, no…
image

Here’s my config :

type: custom:mini-graph-card
name: Temp
entities:
  - entity: sensor.theeye_air_temperature
    name: Terrasse
    color: green
    show_state: true
  - entity: sensor.ble_temperature_thermometre1
    name: Bureau
    color: skyblue
    show_fill: false
    show_state: true
  - entity: sensor.laporte_air_temperature
    name: Salon
    color: red
    show_fill: false
    show_state: true
  - entity: binary_sensor.night
    color: rgba(255,255,255,.25)
    y_axis: secondary
    aggregate_func: min
    show_state: false
    show_line: false
    show_points: false
    show_name: false
    show_icon: false
    name: Nuit
state_map:
  - value: 'off'
    label: Jour
  - value: 'on'
    label: Nuit
show:
  icon: false
  fill: fade
line_width: 3
hours_to_show: 168
animate: true
decimals: 1
hour24: true
align_state: center
align_header: center

Could I achieve this ? How ?
Many thanks for your help

Hi can you share your code pls ?

Did this ever get a follow-up?
It’s looking so, so cool!

Any idea why my mini graph cards aren’t being displayed on my nest hub when casting my dashboard from duckdns?

Happens on both my nest hub and nest hub max.
No errors or anything, still shows the state. Just no graphs. Every other custom card displays fine.
Displays fine on desktop and mobile though…

Could be due to CATT, or the nest hub itself, but it was fine when I was casting a local http dashboard (as opposed to https dns).

[Update: Must be an issue with duckdns/https and mini graph card.
Managed to setup a reverse proxy, and casting the local http site shows the graphs fine.]

It’s possible to convert an ppm ?
image

Successfully added, but it’s not working. HA core-2021.11.5. Can someone tell me what I’m doing wrong here?

You should specify at least one entity

It only works when I specify it this way:

cards:
  - entities:
      - entity: water_heater.vicare_water
        name: Water temperature
    type: custom:mini-graph-card
type: horizontal-stack

This code is minimal to work:

  - type: custom:mini-graph-card
    entities:
      - entity: water_heater.vicare_water

nope, it doesn’t work this way either

This is a code to be used in yaml mode:

view: ...
...
cards:

  - type: custom:mini-graph-card
    entities:
      - entity: water_heater.vicare_water

This is a code to be used in storage mode - i.e.creating cards from UI:

type: custom:mini-graph-card
entities:
  - entity: water_heater.vicare_water

A view = a list of cards.
In yaml a list is this:

- abc
  jkkkkjkj
  yyyyyyyyyy
- def
  jjuuy
- 123abc