Did you check the docs?
You’ll need to use the ApexCharts card.
I checked the docs and did not see this feature that’s why I wrote here in case I missed something.
Indeed, I did it with apexcharts but a like mini graph card so if there is a possibility I’d be happy to go back to mini.
You cannot create a stacked look with mini-graph.
1 Like
I am trying to show a statistics-like graph that displays max, median, min out of x different sensors. Both min and max values should only be displayed with a very thin line (or maybe not be shown at all - only the bands around the median), while the median should be more pronounced. And then the legend should only be displayed for the median.
I tried this:
type: custom:mini-graph-card
decimals: 1
entities:
- entity: sensor.sensors_max
color: orange
show_legend: false
name: min
- entity: sensor.sensors_median
color: red
line_width: 3
show_fill: false
show_legend: true
name: median
- entity: sensor.sensors_min
color: orange
show_legend: false
name: min
line_width: 1
name: test
hours_to_show: 12
card_mod:
style: |
mask:nth-of-type(2) .fill {
opacity: 1 !important;
animation: none;
}
.fill--rect:nth-of-type(2) {
fill: var(--card-background-color);
}
This ended up looking like this:
2 questions:
- why does the 2nd
show_legend: falsemake all legends disappear? - why doesn’t the
line_width: 3for the median change it’s width?
Any help would be much appreciated.
You better to post a link to a source post where you took this code - for consistency.
It should not affect at all since this option could be defined on a card’s level only.
Regarding the fill-option, I went with this post as a blueprint.
Thanks for clarifying this. Maybe I could just show the min and max graph ind the same color and opaqueness as the filled area?
My main problem however is the inconsistency in legends. Why can I hide 1, but not 2 out of 3?
I am not getting the issue.
If you mean “make max/min graphs less vivid” - you can just hide lines:
Suggest to re-test; and a legend is displayed only if a number of entities to be “legended” >= 2.
Trying to use the mini-graph-card for my home built rain sensor
It’s based on this project:
https://www.reddit.com/r/3Dprinting/comments/16azwxr/3d_printed_diy_zigbee_rain_sensor_based_on_aqara/
A dual tipping bucket monitored by a magnetic door contact that flips to 0 or 1 (or wet and dry in my code) (code for platform- and template sensors below)
If I summarize the number of flips for last day, it is 27, that corresponds to 14.2 mm of rain, so that looks to be correct
But - the hourly graph doesn’t give the same when I summarize it!
I had expected the last four hours to show sum up to the same as last 24h (as it has not been raining for a couple of days, so nothing from yesterday should be able to affect it.
# Regnsensor platform sensor rain/24h
- platform: history_stats
name: "Regn Contact Flips/Dry"
entity_id: binary_sensor.regn_contact
state: "off"
type: count
start: "{{ now() - timedelta(hours=24)}}"
end: "{{ now() }}"
- platform: history_stats
name: "Regn Contact Flips/Wet"
entity_id: binary_sensor.regn_contact
state: "on"
type: count
start: "{{ now() - timedelta(hours=24)}}"
end: "{{ now() }}"
#unavailable
- platform: history_stats
name: "Regn Contact Flips/unavailable"
entity_id: binary_sensor.regn_contact
state: "unavailable"
type: count
start: "{{ now() - timedelta(hours=24)}}"
end: "{{ now() }}"
# Regnsensor platform sensor rain/h
- platform: history_stats
name: "Regn Contact Flips/Dry_hour"
entity_id: binary_sensor.regn_contact
state: "off"
type: count
start: "{{ now() - timedelta(hours=1)}}"
end: "{{ now() }}"
- platform: history_stats
name: "Regn Contact Flips/Wet_hour"
entity_id: binary_sensor.regn_contact
state: "on"
type: count
start: "{{ now() - timedelta(hours=1)}}"
end: "{{ now() }}"
#unavailable
- platform: history_stats
name: "Regn Contact Flips/unavailable_hour"
entity_id: binary_sensor.regn_contact
state: "unavailable"
type: count
start: "{{ now() - timedelta(hours=1)}}"
end: "{{ now() }}"
template:
#Template Regnsensor rain/24h
- sensor:
- name: Rainfall [day]
state_class: measurement
unique_id: rainfall_day
unit_of_measurement: mm
icon: mdi:weather-pouring
state: >-
{% set count = (states('sensor.regn_contact_flips_dry') | int(0)) + (states('sensor.regn_contact_flips_wet') | int(0)) - (states('sensor.regn_contact_flips_unavailable') | int(0)) -1 %}
{% if count < 0 %}
{% set count = 0 %}
{% endif %}
{% set mm = count * 0.52615 %}
{% if count >= 0 %}
{{ mm|round(1, 'floor') }}
{% endif %}
#Template Regnsensor rain/h
- sensor:
- name: Rainfall [hour]
state_class: measurement
unique_id: rainfall_hour
unit_of_measurement: mm
icon: mdi:weather-pouring
state: >-
{% set count = (states('sensor.regn_contact_flips_dry_hour') | int(0)) + (states('sensor.regn_contact_flips_wet_hour') | int(0)) - (states('sensor.regn_contact_flips_unavailable_hour') | int(0)) -1 %}
{% if count < 0 %}
{% set count = 0 %}
{% endif %}
{% set mm = count * 0.52615 %}
{% if count >= 0 %}
{{ mm|round(1, 'floor') }}
{% endif %}
(the -1 for “set count” is because the sensor looks to present itself with status on every reboot and that looks to count as well)
The code for my lovelace card looks like this
square: false
type: grid
cards:
- type: custom:mini-graph-card
icon: mdi:weather-rainy
name: Regn/timme
aggregate_func: max
hours_to_show: 24
group_by: hour
show:
graph: bar
fill: true
icon: false
color_thresholds:
- value: 100
color: '#8a111e'
- value: 50
color: '#c7311c'
- value: 25
color: '#fc5a43'
- value: 10
color: '#fc8582'
- value: 5
color: '#fbab3e'
- value: 2
color: '#ebf438'
- value: 1
color: '#79cf3f'
- value: 0.5
color: '#24cbcc'
- value: 0.2
color: '#3296de'
- value: 0
color: '#373737'
entities:
- entity: sensor.rainfall_hour
state_adaptive_color: false
- type: custom:mini-graph-card
icon: mdi:weather-rainy
name: Regn/dygn
aggregate_func: avg
hours_to_show: 360
group_by: date
show:
graph: bar
fill: true
icon: false
color_thresholds:
- value: 100
color: '#8a111e'
- value: 50
color: '#c7311c'
- value: 25
color: '#fc5a43'
- value: 10
color: '#fc8582'
- value: 5
color: '#fbab3e'
- value: 2
color: '#ebf438'
- value: 1
color: '#79cf3f'
- value: 0.5
color: '#24cbcc'
- value: 0.2
color: '#3296de'
- value: 0
color: '#373737'
entities:
- entity: sensor.rainfall_day
state_adaptive_color: false
columns: 1
title: Regnmätare
What is it I don’t understand or have missunderstood?
Why doesn’t hours sum up to the same value as last 24h?
Edit/Add:
Today (day after) the 24h graph doesn’t make any sense to me…
Only 7.84 yesterday (showed above 15 when I went to bed around 23/11pm yesterday and 8.11 for today…while Rain/day shows as 1.5mm…!?
The hourly graph shows it has not been raining since 18/6pm yesterday…why does the daily grahp shows 8.11 for 12am-11.59pm today!?
Hi, I was wondering if there’s a way to convert a temperature graph from F to C? I see that you can change the unit and then also add a value factor field, but that won’t quite do it for temperature. What’s the best way to achieve this?
Did you check if the sensor itself has the option? That would be the cleanest of course; but not sure what you’re looking to do…
@Ildar_Gabdullin thanks for all the work on trying to get people to help customize the card
Would you know (I think legend is the way to go here, but struggling to keep them in one line) how to put the Min and Max to the right of the current temp to use the div row?
I read through the thread on "mini-graph-card" & "history-graph": using a decluttering template - #16 by Ildar_Gabdullin but didn’t find anything exactly like it
Current
would like
Code
type: vertical-stack
cards:
- type: custom:mini-graph-card
name: Temperature
icon: mdi:temperature-celsius
decimals: 1
line_width: 2
hours_to_show: 24
points_per_hour: 1
hour24: true
show:
labels: true
icon: false
name: false
entities:
- entity: sensor.gr_sensor_1_temperature
name: Inside
show_points: false
color_thresholds:
- value: 16
color: '#251ab9'
- value: 17
color: '#0f28e5'
- value: 18
color: '#007eff'
- value: 19
color: '#00aaf9'
- value: 20
color: '#00cc9e'
- value: 22
color: '#59E442'
- value: 21
color: '#7fd206'
- value: 23
color: '#97bf00'
- value: 24
color: '#aaac00'
- value: 25
color: '#b89700'
- value: 26
color: '#c18200'
- value: 27
color: '#c86c00'
- value: 28
color: '#ca5400'
- value: 29
color: '#c93905'
- value: 30
color: '#c4161e'
card_mod:
style: |
.header {
padding-bottom: 0px;
}
.graph__legend {
margin-top: -45px;
justify-content: end;
}
ha-card {
border-radius: var(--ha-card-border-radius, 4px) var(--ha-card-border-radius, 4px) 0px 0px ;
}
- type: history-graph
hours_to_show: 24
refresh_interval: 0
entities:
- entity: sun.sun
card_mod:
style: |
.content {
padding: 0px !important;
margin-left: -20px;
margin-top: -35px
}
ha-card {
overflow: hidden;
margin-top: -8px;
border-radius: 0px 0px var(--ha-card-border-radius, 4px) var(--ha-card-border-radius, 4px);
}
card_mod:
style: |
ha-card {
overflow: visible !important;
}
Thanks in advance!
IMHO - a template sensor with a proper conversion.
You seem to use another my technics “Combining `history-graph` & `mini-graph-card” which I usually do not recommend since it gives very unstable results.
As for presenting “min” & “max” like you want - I do not have an example how to achieve it.
1 Like
Right, but since there’s no time axis, I think your solution is a brilliant and only approach, I haven’t found any other way to show a time axis since the X Axis was rejected
I’ll see if I can chew on the css, thanks!!
Better to say - “not implemented yet”.
Dear All
I would like to know if possible add “CPU usage” or allign position between 2 graph.
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#wlc'
name: Proxmox
icon: phu:proxmox
- type: grid
columns: 1
square: false
cards:
- type: custom:bubble-card
card_type: separator
name: Cisco Wireless LAN Controller
icon: /local/loghi/cisco-logo.png
styles: |
.separator-container div:last-child {
opaticy: 1|important;
}
- type: vertical-stack
cards:
- square: false
columns: 4
type: grid
cards:
- type: custom:button-card
card_mod:
style: |
ha-card {
border-radius: 10px;
box-shadow: 10px;
background-position: center;
}
entity: button.qemu_wlc8_10_185_109_riavvia
name: Reboot
show_state: false
show_name: true
show_label: true
show_icon: true
styles:
card:
- background-size: contain
- background-repeat: no-repeat
- background-position: center
icon:
- width: 27%
- margin-top: 1%
- type: custom:button-card
card_mod:
style: |
ha-card {
border-radius: 10px;
box-shadow: 10px;
background-position: center;
}
entity: button.qemu_wlc8_10_185_109_ferma
name: Stop
show_state: false
show_name: true
show_label: true
show_icon: true
styles:
card:
- background-size: contain
- background-repeat: no-repeat
- background-position: center
icon:
- width: 27%
- margin-top: 1%
- type: custom:button-card
card_mod:
style: |
ha-card {
border-radius: 10px;
box-shadow: 10px;
background-position: center;
}
entity: button.qemu_wlc8_10_185_109_spegni
name: Spegni
show_state: false
show_name: true
show_label: true
show_icon: true
styles:
card:
- background-size: contain
- background-repeat: no-repeat
- background-position: center
icon:
- width: 27%
- margin-top: 1%
- type: custom:button-card
card_mod:
style: |
ha-card {
border-radius: 10px;
box-shadow: 10px;
background-position: center;
}
entity: button.qemu_wlc8_10_185_109_avvia
name: Avvia
show_state: false
show_name: true
show_label: true
show_icon: true
styles:
card:
- background-size: contain
- background-repeat: no-repeat
- background-position: center
icon:
- width: 27%
- margin-top: 1%
- square: false
columns: 2
type: grid
cards:
- type: custom:mini-graph-card
card_mod:
style: |
ha-card {
background: var(--paper-card-background-color);
border-radius: 10px;
box-shadow: 10px;
font-weight: bold;
opacity: 0.8;
}
entities:
- entity: sensor.qemu_dns_server_100_cpu_usata
name: CPU Usage
color: '#14ff8d'
height: 200
hours_to_show: 1
points_per_hour: 60
update_interval: 200
animate: true
aggregate_func: max
line_width: 2
smoothing: true
font_size: 65
lower_bound: 100
font_size_header: 9
show:
average: true
extrema: true
tap_action: none
- type: custom:mini-graph-card
card_mod:
style: |
ha-card {
background: var(--paper-card-background-color);
border-radius: 10px;
box-shadow: 10px;
font-weight: bold;
opacity: 0.8;
}
entities:
- entity: sensor.qemu_dns_server_100_memoria_usata
name: Ram Usage
color: '#14ff8d'
- entity: sensor.qemu_dns_server_100_memoria_libera
name: Memory Free
color: '#0293fa'
height: 200
hours_to_show: 1
points_per_hour: 10
update_interval: 20
aggregate_func: max
animate: true
line_width: 2
smoothing: true
font_size: 65
font_size_header: 9
show:
average: true
extrema: true
tap_action: none
I love this card, but have just one small issue that I’m hoping can easily be resolved.
On the graph there are min/max values but due to the size of my cards, they don’t quite fit. Is there a way to resolve this? The card is being used on a grid mode dashboard.
Example:
Here is my code:
type: custom:mini-graph-card
entities:
- sensor.weather_temperature
show:
labels: true
icon: true
name: Temperature
hours_to_show: 24
points_per_hour: 1
color_thresholds:
- value: 90
color: '#f31212'
- value: 80
color: '#f34a12'
- value: 76
color: '#f38212'
- value: 74
color: '#f3c612'
- value: 72
color: '#c2f312'
- value: 70
color: '#3bf312'
- value: 67
color: '#12f37b'
- value: 65
color: '#12f3dc'
- value: 60
color: '#12b7f3'
- value: 55
color: '#12d1f3'
- value: 40
color: '#1273f3'
- value: 0
color: '#1219f3'
What you may try - adding a padding to the card by card-mod. Do not ask me how, will not give a ready example and cannot; use other card-mod examples as a staring point.
2 Likes
You could also try setting the overflow property on the card to visible using card_mod, or setting a z-index value as well - anything higher than 1 should normally work.
It worked for me to solve a similar issue at least.
1 Like
Is there any way I could convince you to show me how I would do that with the card yaml that I posted above. I’ve spent the better part of today trying to figure out how to use Card-Mod and I just don’t get it.