Did you figure it out?
xD
i’m interested if you had figured it out?
Is there a way to get rid of the labels for Night, Temperature & Humidity on this card?
My code:
type: custom:mini-graph-card
name: Wohnzimmer
icon: mdi:water-thermometer
entities:
- entity: binary_sensor.night
color: grey
y_axis: secondary
aggregate_func: max
show_line: false
show_points: false
show_state: false
- entity: sensor.wohnzimmer_humidity
color: '#457b9d'
line_width: 3
name: Luftfeuchtigkeit
show_state: true
show_points: false
- entity: sensor.wohnzimmer_temperature
color: '#9b2226'
line_width: 3
name: Temperatur
show_state: true
show_points: false
state_map:
- value: 'off'
label: Day
- value: 'on'
label: Night
line_width: 2
hours_to_show: 168
points_per_hour: 0.75
show:
labels: false
labels_secondary: false
This is in the docs:
show_legend: false
And for the title, try:
name: ""
1 Like
yeah, sometimes it can be that easy. Thanks much Pieter!
Hi All,
I have been trying out the mini graph card. I am looking for a way to increase the height of the graph without increasing the size of the card.
is this possible?
I just tried this with custom:stack-in-card, what seems to be working, need to do some more tweaking for myself but you could give it a try.
Example humidity and temp…
Mind sharing the code, please?
Sure, tweak as you like, could use less code, didn’t clean up yet.
type: custom:stack-in-card
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.lumi_lumi_weather_52b3df07_humidity
name: Vochtigheid (24h)
icon: hass:water-percent
line_color: null
line_width: 1
hours_to_show: 168
points_per_hour: 1
font_size_header: null
font_size: null
hour24: true
animate: true
group: false
lower_bound: 10
upper_bound: 90
show:
name: false
icon: false
legend: false
state: false
labels: false
fill: true
points: false
color_thresholds_transition: smooth
color_thresholds:
- value: 30
color: '#ff0000'
- value: 35
color: '#c53100'
- value: 40
color: '#8b6100'
- value: 45
color: '#519200'
- value: 50
color: '#17c200'
- value: 55
color: '#11a240'
- value: 60
color: '#0c8180'
- value: 65
color: '#0661bf'
- value: 70
color: '#0040ff'
style: |
ha-card {
box-shadow: none;
margin-bottom: -120px;
margin-left: 0px;
border-radius: 0px;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.lumi_lumi_weather_52b3df07_temperature
line_color: null
line_width: 1
hours_to_show: 168
points_per_hour: 1
font_size_header: null
font_size: null
hour24: true
animate: true
group: false
lower_bound: 10
upper_bound: 30
show:
name: false
icon: false
legend: false
state: false
labels: false
fill: true
points: false
color_thresholds_transition: smooth
color_thresholds:
- value: -24
color: '#e246d5'
- value: -22
color: '#ef5de3'
- value: -20
color: '#fb74f0'
- value: -18
color: '#c965f3'
- value: -16
color: '#9756f6'
- value: -14
color: '#6448f9'
- value: -12
color: '#3239fc'
- value: -10
color: '#002aff'
- value: -8
color: '#3355ff'
- value: -6
color: '#667fff'
- value: -4
color: '#99aaff'
- value: -2
color: '#ccd4ff'
- value: 0
color: '#ffffff'
- value: 2
color: '#d1fcff'
- value: 4
color: '#bdf3e3'
- value: 6
color: '#a9eac7'
- value: 8
color: '#96e1ac'
- value: 10
color: '#6ecf74'
- value: 12
color: '#8bd05d'
- value: 14
color: '#a8d146'
- value: 16
color: '#c5d32e'
- value: 18
color: '#e2d417'
- value: 20
color: '#ffd500'
- value: 22
color: '#ffaa00'
- value: 24
color: '#ff8000'
- value: 26
color: '#ff5500'
- value: 28
color: '#ff2b00'
- value: 30
color: '#ff0000'
- value: 32
color: '#e80000'
- value: 34
color: '#d00000'
- value: 36
color: '#b90000'
- value: 38
color: '#a10000'
- value: 40
color: '#8a0000'
- value: 42
color: '#910033'
- value: 44
color: '#980066'
- value: 46
color: '#a00099'
- value: 48
color: '#a700cc'
- value: 50
color: '#ae00ff'
style: |
ha-card {
box-shadow: none;
margin-top: 0px;
margin-left: 0px;
border-radius: 0px;
}
1 Like
it is possible to set the lower and upper bound.
lower_bound: 0
upper_bound: 200
for example.
Any idea how to convert unit values in example this one to mm/h:
Same for the weather from mph to kmh.
Have a ecowitt weather station and would be nice to have some graphics.
Create template sensors with converted units.
Or, if this integration supports changing units - select required units in corresponding settings for this platform.
Hello,
is it possible to change the Icon Color or the Background of a Card Based on entity stat.
In my case i “set up” a graph for a socket and when i tap the card the machine turns on and off.
Now i want to show the Status from the ON/OFF Swicht in card. So my Idea were to change the color of the icon or the Background, but i dont know if this is possible?
I am not good at coding 
.
Here is my code for my card.
type: custom:mini-graph-card
name: La Pavoni
icon: mdi:coffee
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.socket_isomactea
entities:
- entity: sensor.socket_isomactea_energy_power
name: now
- entity: sensor.socket_isomactea_energy_today
name: today
show_state: true
show_indicator: true
show_graph: false
- entity: sensor.socket_isomactea_energy_yesterday
name: yesterday
show_state: true
show_indicator: true
show_graph: false
hours_to_show: 24
line_width: 3
hour24: true
aggregate_func: max
height: 50
Possible with card-mod.
Go to card-mod thread - 1st post - link at the bottom - styles for this card
You will have to )
Example of making a card more compact when used in a horizontal stack or a grid.
Consider this code:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- &ref_card
type: custom:mini-graph-card
entities:
- entity: sensor.processor_use
hours_to_show: 1
points_per_hour: 60
show:
state: true
- *ref_card
- *ref_card
- type: grid
square: false
cards:
- *ref_card
- *ref_card
- *ref_card
- type: grid
columns: 4
square: false
cards:
- *ref_card
- *ref_card
- *ref_card
- *ref_card
which gives this card:
Add some styles:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- &ref_card
type: custom:mini-graph-card
entities:
- entity: sensor.processor_use
hours_to_show: 1
font_size: 50
points_per_hour: 60
show:
state: true
card_mod:
style: |
.name {
font-size: 10px;
}
.header {
padding-bottom: 0px;
}
.states {
padding-bottom: 0px;
}
ha-card {
height: 100px !important;
padding-top: 4px !important;
}
- *ref_card
- *ref_card
- type: grid
square: false
cards:
- *ref_card
- *ref_card
- *ref_card
- type: grid
columns: 4
square: false
cards:
- *ref_card
- *ref_card
- *ref_card
- *ref_card
and get this more compact view:
3 Likes
Hi to all, i’m using this awesome mod for display time of my Heather stay on.
I created a sensor with hystory stats that is displayed in hour and minuts, but in the graph the result Is wrong because for him minutes ar 100 not 60.
For example if the correct value Is 4h20 minutes, in the graph Is displayed 4h34 minutes.
Thanks for some solution
Post:
- A code for the history_stat sensor.
- A code for the mini-graph-card with this sensor which seems to be WRONG for you.
- Two screenshots: for the card mentioned above and for the conventional “history-graph” with the same sensor and same “hours_to_show”.
Hi all,
I would like to add an icon (battery) next to the temperature to show the battery level of this probe?
Or an other place in this card, and maybe more and more icon to show state of heating, cooling,… everything in same card.
type: custom:mini-graph-card
name: Température 24h
icon: mdi:home-thermometer-outline
entities:
- entity: sensor.temperature_11
name: Séjour
show_state: true
- entity: sensor.temperature_8
name: Extérieur
show_state: true
y_axis: secondary
hours_to_show: 24
points_per_hour: 2
hour24: true
line_width: 2
show:
labels: true
name: true
icon: true
labels_secondary: true
Any one know how do this?
Thanks
wow, nice indeed!
I threw all graphs in asingle grid 3, and would love to set the colors in the main anchor… havent been able to find a way to do that. can we at all?
type: grid
columns: 3
square: false
cards:
- <<: &graph
type: custom:mini-graph-card
card_mod:
style: |
.name {
font-size: 10px;
}
.header {
padding-bottom: 0px;
}
.states {
padding-bottom: 0px;
font-size: 6px;
}
ha-card {
height: 100px !important;
padding-top: 4px !important;
}
hours_to_show: 4
font_size: 50
points_per_hour: 30
show:
icon: false
state: true
legend: false
fill: fade
name: Living
entities:
- entity: sensor.temperatuur_living
color: gold # <-- move to main config?
- entity: sensor.luchtvochtigheid_living
color: blue # move to main config?
y_axis: secondary
was looking for a primary graph and secondary graph color (or axis maybe?), so we could add that to the anchor, and not have to repeat the on all entities individually
a bit like we can do:
labels_secondary: true
Probably best suited for a decluttering-card.
solution
yup:
default:
graph: line
card:
type: custom:mini-graph-card
card_mod:
style: |
.name {
font-size: 10px;
}
.header {
padding-bottom: 0px;
}
.states {
padding-bottom: 0px;
font-size: 6px;
}
ha-card {
height: 100px !important;
padding-top: 4px !important;
}
hours_to_show: 4
font_size: 50
points_per_hour: 30
show:
graph: '[[graph]]'
icon: false
state: true
legend: false
fill: fade
animate: true
name: '[[name]]'
entities:
- entity: '[[sensor1]]'
color: gold
- entity: '[[sensor2]]'
y_axis: secondary
and card config in dashboard:
type: grid
columns: 2
square: false
cards:
- type: custom:decluttering-card
template: temp_humidity_graph
variables:
- graph: bar
- name: Living
- sensor1: sensor.temperatuur_living
- sensor2: sensor.luchtvochtigheid_living
- type: custom:decluttering-card
template: temp_humidity_graph
variables:
- name: Masters
- sensor1: sensor.master_bedroom_hygro_temp_temperature
- sensor2: sensor.master_bedroom_hygro_temp_humidity
- type: custom:decluttering-card
template: temp_humidity_graph
variables:
etc etc
very nice indeed, thanks!