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…
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.
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.
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.
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.
Sorry, should have done this in my first reply. Here’s what works for me:
- type: custom:mini-graph-csrd
card_mod:
style: |
ha-card {
overflow: visible !important;
z-index: 2;
}
No worries, I’m only about 4 days into Home Assistant and have very little coding skills, so the newb hasn’t even started to wear off yet. 
I put that code in the card, but nothing happened. Card-Mod is installed via HACS but don’t know if there is additional config I need to do to get it to work.
That depends - if you are running your Dashboards in storage mode, then no. In YAML mode you have to explicitly list it as a custom resource in the lovelace section of your configuration.yaml.
But it is also always worth clearing browser cache. Or setting a higher z-index value?
Otherwise, you could check your browser’s developer tools to confirm that card-mod is being loaded - in Firefox/Chrome you access that by pressing F12.
Beyond that, we’re in YMMV territory I’m afraid.
Edit: though looking at your screenshot, isn’t it actually working? The min max bubbles are now overflowing the card border. Or did I misunderstood what you were trying to achieve?
Edit2: in fact, so is it the graph line. Probably not what you want. Perhaps not a solution for you after all. I think in my use, I wrap the card in a stack within another card with its own border, so maybe that’s why I don’t see that.
I appreciate you taking the time on this. I honestly don’t know how to switch between storage mode and YAML mode. It’s set to whatever is the default. The issue is that I don’t want the bubbles to overflow. I want to see them properly. I need to make adjust the card height so that I can see all of it. My cards are in a dashboard that is set to grid view so that I wouldn’t have to stack them within other cards. It just gives you more precise placement. (at least for someone who doesn’t really know YAML.
I think it’s basically a feature of the card that the bubbles appear visually in line with the min and max levels - for low or zero levels as in your case, this means the min is at the very bottom of the card, and the bubble gets cut off sometimes.
I’ve not explored if there are ways to make the bubbles appear elsewhere - overall, this cutting off is probably a bug actually, but the card is not really being maintained now, so unlikely to get fixed.
EDIT: think I’ve found it (UNTESTED):
- type: custom:mini-graph-card
card_mod:
style: |
div.graph__labels {
bottom: 18px; #<-- this moves the box containing the bubbles upwards. Adjust accordingly using px, or rem or whatever. Use !important if it doesn't work the first time.
}
This may have other side effects of course, as I’ve not actualy tried it.