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 
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…
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 ?
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
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